This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 27e8686841 Added checkbox. Still need to resolve the skin.
27e8686841 is described below
commit 27e86868417fdb64c08e05f688186aed786a8068
Author: Harbs <[email protected]>
AuthorDate: Fri Mar 13 13:29:16 2026 +0200
Added checkbox. Still need to resolve the skin.
---
.../royale/org/apache/royale/style/CheckBox.as | 343 +++++++++++++++++++++
.../main/royale/org/apache/royale/style/IIcon.as | 24 ++
.../royale/org/apache/royale/style/const/Theme.as | 43 +++
.../org/apache/royale/style/skins/CheckBoxSkin.as | 108 +++++++
.../org/apache/royale/style/skins/ICheckBoxSkin.as | 31 ++
.../style/stylebeads/states/FocusVisibleState.as | 30 ++
.../style/stylebeads/states/IndeterminateState.as | 30 ++
.../royale/style/stylebeads/utils/ScreenReader.as | 60 ++++
8 files changed, 669 insertions(+)
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as
new file mode 100644
index 0000000000..5dbd3cbb23
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as
@@ -0,0 +1,343 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+
+ COMPILE::JS{
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+ import org.apache.royale.core.IHasLabel;
+ import org.apache.royale.style.elements.Div;
+ import org.apache.royale.style.elements.Span;
+ import org.apache.royale.style.support.TextNode;
+ import org.apache.royale.style.skins.ICheckBoxSkin;
+ import org.apache.royale.style.elements.I;
+ import org.apache.royale.style.stylebeads.IStyleBead;
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.stylebeads.utils.ScreenReader;
+ /**
+ * Dispatched when the user checks or un-checks the CheckBox.
+ *
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ public class CheckBox extends StyleUIBase implements IHasLabel
+ {
+
+ public function CheckBox()
+ {
+ super();
+ }
+ COMPILE::JS
+ private var input:HTMLInputElement;
+
+ private function elementClicked():void{
+ // _indeterminate = input.indeterminate = false;//
input.indeterminate should be resolved automatically.
+ _indeterminate = false;
+ if(_stylesLoaded && !checkIcon)
+ applyCheckSkin();
+ }
+
+ override protected function getTag():String
+ {
+ return "label";
+ }
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement{
+ var elem:WrappedHTMLElement = super.createElement();
+ input = newElement("input") as HTMLInputElement;
+ input.type = "checkbox";
+ var srOnly:String = new ScreenReader().getSelector();
+ input.className = ("peer " + srOnly);
+ input.onclick = elementClicked;
+ elem.appendChild(input);
+ box = new Div();
+ addElement(box);
+ return elem;
+ }
+ private var box:Div;
+
+ private var _label:String = "";
+ public function get label():String
+ {
+ return _label;
+ }
+
+ private var span:Span;
+ public function set label(value:String):void
+ {
+ COMPILE::JS
+ {
+ if(_label != value){
+ _label = value;
+ if(!span){
+ span = new Span();
+ addElement(span);
+ if(_stylesLoaded)
+ {
+ applyLabelSkin();
+ }
+ }
+ span.text = value;
+ input.setAttribute("aria-label", value);
+ }
+ }
+ }
+ override protected function applySkin():void
+ {
+ var checkSkin:ICheckBoxSkin = skin as ICheckBoxSkin;
+ var styles:Array = checkSkin?.styles || [];
+ for each(var style:IStyleBead in styles){
+ addStyleBead(style);
+ }
+ styles = checkSkin?.boxStyles || [];
+ for each(style in styles){
+ box.addStyleBead(style);
+ }
+ applyCheckSkin();
+ applyIndeterminateSkin();
+ applyLabelSkin();
+ }
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.skins.ICheckBoxSkin
+ */
+ private function applyLabelSkin():void
+ {
+ var checkSkin:ICheckBoxSkin = skin as ICheckBoxSkin;
+ var styles:Array = checkSkin?.labelStyles || [];
+ for each(var style:IStyleBead in styles){
+ span.addStyleBead(style);
+ }
+ }
+ private var _truncate:Boolean;
+
+ public function get truncate():Boolean
+ {
+ return _truncate;
+ }
+ public function set truncate(value:Boolean):void
+ {
+ _truncate = value;
+ COMPILE::JS
+ {
+ // Ideally, styles should be applied using
utility classes, but we're toggling these for now.
+ if(_stylesLoaded && span){
+ if(value){
+
span.setStyle("text-overflow","ellipsis");
+
span.setStyle("overflow","hidden");
+
span.setStyle("white-space","nowrap");
+ } else {
+
span.setStyle("text-overflow","");
+ span.setStyle("overflow","");
+ span.setStyle("white-space","");
+ }
+ }
+ }
+ }
+ private var _invalid:Boolean;
+ /**
+ * Indicates whether the current state of the CheckBox is
invalid.
+ * This can be used to apply error styles to the component.
+ *
+ * The Checkbox skin should specify invalid styles if desired.
+ *
+ * @languageversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get invalid():Boolean
+ {
+ return _invalid;
+ }
+
+ public function set invalid(value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ if(value != !!_invalid){
+ input.setAttribute("aria-invalid",
value);
+ setAttribute("data-invalid", value);
+ }
+ }
+ _invalid = value;
+ }
+ private var indeterminateIcon:IStyleUIBase;
+ private var _indeterminate:Boolean;
+ /**
+ * Indicates whether the CheckBox is in an indeterminate state.
In this state, the checkbox is neither checked nor unchecked.
+ * This is typically used to indicate a mixed state, such as
when some child items are checked and others are not.
+ * When set to true, the CheckBox will display the
indeterminateIcon if provided by the skin.
+ *
+ * The Checkbox skin should specify an indeterminateIcon if it
wants to support this state.
+ * If no indeterminateIcon is provided, the CheckBox will
simply not display a check icon when in the indeterminate state.
+ *
+ * @languageversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get indeterminate():Boolean
+ {
+ return _indeterminate;
+ }
+
+ public function set indeterminate(value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ if(value != !!_indeterminate){
+ _indeterminate = value;
+ input.indeterminate = value;
+ if(value)
+ _checked = input.checked =
false;
+
+ if(_stylesLoaded && !indeterminateIcon)
+ applyIndeterminateSkin();
+ }
+ }
+ }
+ private function applyIndeterminateSkin():void
+ {
+ if(!indeterminate && !indeterminateIcon) return;
+ COMPILE::JS
+ {
+ var checkSkin:ICheckBoxSkin = skin as
ICheckBoxSkin;
+ var icon:IStyleUIBase =
checkSkin?.indeterminateIcon;
+ if(icon && icon != indeterminateIcon){
+ if(indeterminateIcon &&
indeterminateIcon.parent){
+ assert(indeterminateIcon.parent
== this, "Indeterminate icon should be a child of this");
+
removeElement(indeterminateIcon);
+ }
+ indeterminateIcon = icon;
+ if(span)
+ {
+ assert(span.parent == this,
"span should be a child of this");
+
element.insertBefore(indeterminateIcon.element, span.element);
+ }
+ else
+ addElement(indeterminateIcon);
+
+ }
+ }
+ }
+
+ private var _disabled:Boolean;
+
+ public function get disabled():Boolean
+ {
+ return _disabled;
+ }
+
+ public function set disabled(value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ if(value != !!_disabled){
+ input.disabled = value;
+ }
+ }
+ _disabled = value;
+ }
+ private var checkIcon:IStyleUIBase;
+ private var _checked:Boolean;
+ [Bindable]
+ public function get checked():Boolean
+ {
+ return _checked;
+ }
+
+ public function set checked(value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ if(value != !!_checked){
+ _checked = value;
+ _indeterminate = input.indeterminate =
false;
+ if(_stylesLoaded && !checkIcon)
+ applyCheckSkin();
+ input.checked = value;
+ }
+ }
+ }
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.skins.ICheckBoxSkin
+ */
+ private function applyCheckSkin():void
+ {
+ if(!checked && !checkIcon) return;
+ COMPILE::JS
+ {
+ var checkSkin:ICheckBoxSkin = skin as
ICheckBoxSkin;
+ assert(checkSkin, "CheckBox needs a skin");
+ var icon:IStyleUIBase = checkSkin.checkIcon;
+ assert(icon || checkIcon, "CheckBox skin must
provide a checkIcon for checked state");
+ if(icon && icon != checkIcon){
+ if(checkIcon && checkIcon.parent){
+ assert(checkIcon.parent ==
this, "Check icon should be a child of this");
+ removeElement(checkIcon);
+ }
+ checkIcon = icon;
+ if(span)
+ {
+ assert(span.parent == this,
"span should be a child of this");
+
element.insertBefore(checkIcon.element, span.element);
+ }
+ else
+ addElement(checkIcon);
+ }
+ }
+ }
+ private var _quiet:Boolean;
+ /**
+ * When true, the CheckBox will have a quieter appearance with
less visual emphasis. This can be used when the CheckBox is part of a group of
related options to reduce visual noise.
+ * The Checkbox skin should specify styles for the quiet state
if it should look different than the regular state. This might include things
like lighter colors, smaller size, or less prominent check icons.
+ *
+ * @languageversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get quiet():Boolean
+ {
+ return _quiet;
+ }
+
+ public function set quiet(value:Boolean):void
+ {
+ _quiet = value;
+ }
+ }
+}
+
+/**
+
+ <label
+ data-size="sm"
+ class="checkbox inline-grid cursor-pointer grid-cols-[var(--box)_auto]
items-center gap-x-[var(--gap)] select-none [&:has(input:disabled)]:cursor-auto"
+ >
+ <input
+ id="newsletter"
+ type="checkbox"
+ class="peer sr-only"
+ aria-label="Click this awesome button"
+ />
+
+ <div class="checkbox-box col-start-1 row-start-1 h-[var(--box)]
w-[var(--box)] rounded border-2 border-slate-500 transition
peer-focus-visible:ring-2 peer-focus-visible:ring-orange-500/40
peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-slate-50
peer-checked:border-orange-500 peer-checked:bg-orange-500
peer-indeterminate:border-orange-500 peer-indeterminate:bg-orange-500
peer-disabled:border-slate-300 peer-disabled:bg-slate-100 dark:border-slate-400
dark:peer-focus [...]
+ <div class="check-icon col-start-1 row-start-1 h-[var(--tick-h)]
w-[var(--tick-w)] place-self-center -translate-y-[8%] rotate-45 border-b-[3px]
border-r-[3px] border-white opacity-0 transition peer-checked:opacity-100
peer-indeterminate:opacity-0 peer-disabled:border-slate-300
dark:peer-disabled:border-slate-500"></div>
+ <div class="col-start-1 row-start-1 h-[14%] w-[var(--minus-w)]
place-self-center rounded bg-white opacity-0 transition
peer-indeterminate:opacity-100 peer-disabled:bg-slate-300
dark:peer-disabled:bg-slate-500"></div>
+ <span class="col-start-2 row-start-1 text-[length:var(--size)]
font-semibold text-slate-800 dark:text-slate-100 peer-disabled:text-slate-400
dark:peer-disabled:text-slate-500">Click this awesome button</span>
+ </label>
+
+ */
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IIcon.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IIcon.as
new file mode 100644
index 0000000000..f6bca657de
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IIcon.as
@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+ public interface IIcon extends IStyleUIBase
+ {
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/const/Theme.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/const/Theme.as
new file mode 100644
index 0000000000..34e32fccbe
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/const/Theme.as
@@ -0,0 +1,43 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.const
+{
+ /**
+ * @royalesuppressexport
+ */
+ public class Theme
+ {
+ /**
+ * Static only
+ */
+ private function Theme()
+ {
+
+ }
+ public static const LIGHT:String = "light";
+ public static const DARK:String = "dark";
+ public static const X_SMALL:String = "xs";
+ public static const SMALL:String = "sm";
+ public static const MEDIUM:String = "md";
+ public static const LARGE:String = "lg";
+ public static const XL:String = "xl";
+ public static const XXL:String = "2xl";
+ public static const XXXL:String = "3xl";
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
new file mode 100644
index 0000000000..2eebf3f0c7
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
@@ -0,0 +1,108 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.skins
+{
+ import org.apache.royale.style.StyleSkin;
+ import org.apache.royale.style.IIcon;
+ import org.apache.royale.style.Icon;
+ import org.apache.royale.style.IStyleUIBase;
+
+ public class CheckBoxSkin extends StyleSkin implements ICheckBoxSkin
+ {
+ public function CheckBoxSkin()
+ {
+ super();
+ _styles = [
+ // new CheckBoxBackground(),
+ // new CheckBoxBorder(),
+ // new CheckBoxCheckmark()
+ ];
+ }
+
+ private var _boxStyles:Array;
+
+ public function get boxStyles():Array
+ {
+ return _boxStyles;
+ }
+
+ public function set boxStyles(value:Array):void
+ {
+ _boxStyles = value;
+ }
+ private var _labelStyles:Array;
+
+ public function get labelStyles():Array
+ {
+ return _labelStyles;
+ }
+
+ public function set labelStyles(value:Array):void
+ {
+ _labelStyles = value;
+ }
+
+ private var _checkIcon:IStyleUIBase;
+ /**
+ * The checkIcon should have any styles pre-applied.
+ */
+ public function get checkIcon():IStyleUIBase
+ {
+ if(!_checkIcon){
+ var iconName:String = "style_checkIconSmall";
+ if(!Icon.isRegistered(iconName))
+ Icon.registerIcon(iconName,
+ <svg viewBox="0 0 12 10"
fill="none" aria-hidden="true" width="10" height="10">
+ <path d="M1.5 5.5L4.5
8.5L10.5 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
+ </svg>);
+ _checkIcon = new Icon(iconName);
+ }
+ return _checkIcon;
+ }
+
+ public function set checkIcon(value:IStyleUIBase):void
+ {
+ _checkIcon = value;
+ }
+
+ private var _indeterminateIcon:IStyleUIBase;
+ /**
+ * The indeterminateIcon should have any styles pre-applied.
+ */
+ public function get indeterminateIcon():IStyleUIBase
+ {
+ if(!_indeterminateIcon){
+ var iconName:String =
"style_indeterminateIconSmall";
+ if(!Icon.isRegistered(iconName))
+ Icon.registerIcon(iconName,
+ <svg viewBox="0 0 12 10"
fill="none" aria-hidden="true" width="10" height="10">
+ <rect x="1" y="4.5"
width="10" height="1" fill="currentColor"/>
+ </svg>);
+ _indeterminateIcon = new Icon(iconName);
+ }
+ return _indeterminateIcon;
+ }
+
+ public function set indeterminateIcon(value:IStyleUIBase):void
+ {
+ _indeterminateIcon = value;
+ }
+
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as
new file mode 100644
index 0000000000..010e9de961
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.skins
+{
+ import org.apache.royale.style.IStyleSkin;
+ import org.apache.royale.style.IStyleUIBase;
+
+ public interface ICheckBoxSkin extends IStyleSkin
+ {
+ function get boxStyles():Array;
+ function get labelStyles():Array;
+ function get checkIcon():IStyleUIBase;
+ function get indeterminateIcon():IStyleUIBase;
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as
new file mode 100644
index 0000000000..c7254e3c71
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as
@@ -0,0 +1,30 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads.states
+{
+ public class FocusVisibleState extends LeafDecorator
+ {
+ public function FocusVisibleState()
+ {
+ super();
+ preDecorator = "focus-visible:";
+ postDecorator = ":focus-visible";
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
new file mode 100644
index 0000000000..f84d657118
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
@@ -0,0 +1,30 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads.states
+{
+ public class IndeterminateState extends LeafDecorator
+ {
+ public function IndeterminateState()
+ {
+ super();
+ preDecorator = "indeterminate:";
+ postDecorator = ":indeterminate";
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/utils/ScreenReader.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/utils/ScreenReader.as
new file mode 100644
index 0000000000..71ec338a05
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/utils/ScreenReader.as
@@ -0,0 +1,60 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads.utils
+{
+ import org.apache.royale.style.stylebeads.LeafStyleBase;
+ /**
+ * Use this to hide an element visually without hiding it from screen
readers.
+ */
+ public class ScreenReader extends LeafStyleBase
+ {
+ public function ScreenReader()
+ {
+ super("","");
+ exclude = false;
+ }
+
+ private function getSrOnly():String
+ {
+ return "position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden; clip-path: inset(50%);
white-space:nowrap; border-width:0;";
+ }
+
+ private function getNotSrOnly():String
+ {
+ return "position:static; width:auto; height:auto;
padding:0; margin:0; overflow:visible; clip:none; white-space:normal;";
+ }
+
+ private var _exclude:Boolean = false;
+ /**
+ * If true, this will "undo" an existing sr-only.
+ */
+ public function get exclude():Boolean
+ {
+ return _exclude;
+ }
+
+ public function set exclude(value:Boolean):void
+ {
+ _exclude = value;
+ calculatedSelector = _exclude ? "not-sr-only" :
"sr-only";
+ calculatedRuleValue = _exclude ? getNotSrOnly() :
getSrOnly();
+ }
+
+ }
+}
\ No newline at end of file
