Merge branch 'main' into aristo3

This reverts commit c72c761a60.

AppKit/CPAlert.j

@@ -418,20 +418,25 @@ var bottomHeight = 71;
 */
 - (void)addButtonWithTitle:(CPString)aTitle
 {
-    var bounds = [[_window contentView] bounds],
-        count = [_buttons count],
-
+    var count = [_buttons count],
         button = [[CPButton alloc] initWithFrame:CGRectMakeZero()];
 
     [button setTitle:aTitle];
     [button setTag:count];
     [button setTarget:self];
     [button setAction:@selector(_takeReturnCodeFrom:)];
+    [button setBezelStyle:CPSmallSquareBezelStyle];
 
-    [[_window contentView] addSubview:button];
+    // Only add subview if the window has been created.
+    // Otherwise, _createWindowWithStyle will handle adding the buttons from the _buttons array later.
+    if (_window)
+        [[_window contentView] addSubview:button];
 
     if (count == 0)
+    {
         [button setKeyEquivalent:CPCarriageReturnCharacter];
+        [button setBezelStyle:CPRoundedBezelStyle];
+    }
     else if ([aTitle lowercaseString] === @"cancel")
         [button setKeyEquivalent:CPEscapeFunctionKey];
 
@@ -530,6 +535,9 @@ var bottomHeight = 71;
     [[_window contentView] addSubview:_suppressionButton];
 }
 
+/*!
+    @ignore
+*/
 /*!
     @ignore
 */
@@ -539,25 +547,17 @@ var bottomHeight = 71;
         minimumSize = [_themeView currentValueForThemeAttribute:@"size"],
         buttonOffset = [_themeView currentValueForThemeAttribute:@"button-offset"],
         helpLeftOffset = [_themeView currentValueForThemeAttribute:@"help-image-left-offset"],
-        aRepresentativeButton = [_buttons objectAtIndex:0],
         defaultElementsMargin = [_themeView currentValueForThemeAttribute:@"default-elements-margin"],
-        panelSize = [[_window contentView] frame].size,
+        
         buttonsOriginY,
         buttonMarginY,
         buttonMarginX,
         theme = [self theme],
         offsetX;
 
-    [aRepresentativeButton setTheme:[self theme]];
-    [aRepresentativeButton sizeToFit];
-
-    panelSize.height = CGRectGetMaxY([lastView frame]) + defaultElementsMargin + [aRepresentativeButton frameSize].height;
-    if (panelSize.height < minimumSize.height)
-        panelSize.height = minimumSize.height;
-
-    buttonsOriginY = panelSize.height - [aRepresentativeButton frameSize].height + buttonOffset;
-    offsetX = panelSize.width - inset.right;
+    var isHUD = (_defaultWindowStyle & CPHUDBackgroundWindowMask) || (theme === [CPTheme defaultHudTheme]);
 
+    // 1. Determine Margins (Moved up so we can use them in height calculation)
     switch ([_window styleMask])
     {
         case _CPModalWindowMask:
@@ -571,27 +571,61 @@ var bottomHeight = 71;
             break;
     }
 
+    // 2. Prepare buttons and get row height
+    var maxButtonHeight = 0.0;
+    
+    for (var i = 0; i < [_buttons count]; i++)
+    {
+        var btn = _buttons[i];
+        [btn sizeToFit];
+
+        if (isHUD)
+            [btn setThemeState:CPThemeStateHUD];
+        else
+            [btn unsetThemeState:CPThemeStateHUD];
+
+        maxButtonHeight = MAX(maxButtonHeight, CGRectGetHeight([btn frame]));
+    }
+
+    // 3. Calculate Content Height
+    var lastViewMaxY = CGRectGetMaxY([lastView frame]);
+    // Use bottomHeight (71) to reserve space for the footer
+    var requiredContentHeight = lastViewMaxY + bottomHeight;
+    
+    var finalContentSize = CGSizeMake(
+        [[_window contentView] frame].size.width,
+        MAX(requiredContentHeight, minimumSize.height)
+    );
+
+    // 4. Position Buttons
+    // Calculate the top Y coordinate to vertically center the button row within the bottomHeight area
+    // Center Y of footer = Height - (bottomHeight / 2.0)
+    // Top Y of button = Center Y - (maxButtonHeight / 2.0)
+    buttonsOriginY = finalContentSize.height - ((bottomHeight + maxButtonHeight) / 2.0) - buttonMarginY;
+    
+    offsetX = finalContentSize.width - inset.right;
+    // Loop and set frames
     for (var i = [_buttons count] - 1; i >= 0 ; i--)
     {
-        var button = _buttons[i];
-        [button setTheme:[self theme]];
-        [button sizeToFit];
-
-        var buttonFrame = [button frame],
+        var button = _buttons[i],
+            buttonFrame = [button frame],
             width = MAX(80.0, CGRectGetWidth(buttonFrame)),
-            height = CGRectGetHeight(buttonFrame);
+            height = CGRectGetHeight(buttonFrame),
+            yOffset = FLOOR((maxButtonHeight - height) / 2.0);
 
         offsetX -= width;
-        [button setFrame:CGRectMake(offsetX + buttonMarginX, buttonsOriginY + buttonMarginY, width, height)];
+        [button setFrame:CGRectMake(offsetX + buttonMarginX, buttonsOriginY + buttonMarginY + yOffset, width, height)];
         offsetX -= 10;
     }
 
+    // Position Help Button if needed
     if (_showHelp)
     {
         var helpImage = [_themeView currentValueForThemeAttribute:@"help-image"],
             helpImagePressed = [_themeView currentValueForThemeAttribute:@"help-image-pressed"],
             helpImageSize = helpImage ? [helpImage size] : CGSizeMakeZero(),
-            helpFrame = CGRectMake(helpLeftOffset, buttonsOriginY, helpImageSize.width, helpImageSize.height);
+            helpYOffset = FLOOR((maxButtonHeight - helpImageSize.height) / 2.0),
+            helpFrame = CGRectMake(helpLeftOffset, buttonsOriginY + buttonMarginY + helpYOffset, helpImageSize.width, helpImageSize.height);
 
         [_alertHelpButton setImage:helpImage];
         [_alertHelpButton setAlternateImage:helpImagePressed];
@@ -599,8 +633,7 @@ var bottomHeight = 71;
         [_alertHelpButton setFrame:helpFrame];
     }
 
-    panelSize.height += [aRepresentativeButton frameSize].height + inset.bottom + buttonOffset;
-    return panelSize;
+    return finalContentSize;
 }
 
 /*!
@@ -614,9 +647,14 @@ var bottomHeight = 71;
     if (!_window)
         [self _createWindowWithStyle:nil];
 
+    // Ensure the theme view knows if we are in HUD mode so it picks up the right specificities
+    if ((_defaultWindowStyle & CPHUDBackgroundWindowMask) || ([self theme] === [CPTheme defaultHudTheme]))
+        [_themeView setThemeState:CPThemeStateHUD];
+    else
+        [_themeView unsetThemeState:CPThemeStateHUD];
+
     var iconOffset = [_themeView currentValueForThemeAttribute:@"image-offset"],
-        theImage = _icon,
-        finalSize;
+        theImage = _icon;
 
     if (!theImage)
         switch (_alertStyle)
@@ -648,11 +686,17 @@ var bottomHeight = 71;
     else if (_accessoryView)
         lastView = _accessoryView;
 
-    finalSize = [self _layoutButtonsFromView:lastView];
-    if ([_window styleMask] & CPDocModalWindowMask)
-        finalSize.height -= 26; // adjust the absence of title bar
-
-    [_window setFrameSize:finalSize];
+    // 1. Get the size needed for the *content* (text, buttons, padding)
+    var finalContentSize = [self _layoutButtonsFromView:lastView];
+    
+    // 2. Convert Content Size -> Frame Size
+    // This accounts for the Title Bar and borders automatically.
+    var contentRect = CGRectMake(0.0, 0.0, finalContentSize.width, finalContentSize.height);
+    var frameRect = [[_window class] frameRectForContentRect:contentRect styleMask:[_window styleMask]];
+    
+    // 3. Apply the calculated Frame Size
+    [_window setFrameSize:frameRect.size];
+    
     [_window center];
 
     if ([_window styleMask] & _CPModalWindowMask || [_window styleMask] & CPHUDBackgroundWindowMask)
@@ -752,6 +796,12 @@ var bottomHeight = 71;
     var frame = CGRectMakeZero();
     frame.size = [_themeView currentValueForThemeAttribute:@"size"];
 
+    //  Propagate CPHUDBackgroundWindowMask from _defaultWindowStyle to forceStyle.
+    // This ensures that even if we force CPDocModalWindowMask (for sheets),
+    // the window still knows it should be a HUD.
+    if (_defaultWindowStyle & CPHUDBackgroundWindowMask)
+        forceStyle |= CPHUDBackgroundWindowMask;
+
     _window = [[CPPanel alloc] initWithContentRect:frame styleMask:forceStyle || _defaultWindowStyle];
     [_window setLevel:CPStatusWindowLevel];
     [_window setPlatformWindow:[[CPApp keyWindow] platformWindow]];

AppKit/CPApplication.j

@@ -122,6 +122,10 @@ var CPApplicationDelegate_applicationShouldTerminate_           = 1 << 0,
     CPPanel                     _aboutPanel;
 
     CPThemeBlend                _themeBlend @accessors(property=themeBlend);
+
+    // OS behavior
+    CPApplicationOSBehavior     _OSBehavior;
+    BOOL                        _simulatesWindows;
 }
 
 /*!
@@ -154,6 +158,9 @@ var CPApplicationDelegate_applicationShouldTerminate_           = 1 << 0,
         _eventListenerInsertionIndex = 0;
 
         _windows = [[CPNull null]];
+
+        _OSBehavior       = CPApplicationLegacyOSBehavior;
+        _simulatesWindows = NO;
     }
 
     return self;
@@ -1260,7 +1267,45 @@ var CPApplicationDelegate_applicationShouldTerminate_           = 1 << 0,
 
 + (CPString)defaultThemeName
 {
-    return ([[CPBundle mainBundle] objectForInfoDictionaryKey:"CPDefaultTheme"] || @"Aristo2");
+    return ([[CPBundle mainBundle] objectForInfoDictionaryKey:"CPDefaultTheme"] || @"Aristo3");
+}
+
+// See CPApplication_Constants.j for comments
+- (void)setOSBehavior:(CPApplicationOSBehavior)anOSBehavior
+{
+    // Verify if provided OS behavior is valid
+    if ([[CPApplicationOSBehaviors allKeysForObject:anOSBehavior] count] == 0)
+    {
+        CPLog.warn("CPApplication setOSBehavior: invalid CPApplicationOSBehavior (received "+anOSBehavior+"). Ignored.");
+        return;
+    }
+
+    _OSBehavior = anOSBehavior;
+
+    [[CPNotificationCenter defaultCenter] postNotificationName:CPApplicationOSBehaviorDidChangeNotification object:CPApp userInfo:nil];
+}
+
+- (CPApplicationOSBehavior)OSBehavior
+{
+    return _OSBehavior;
+}
+
+- (BOOL)shouldMimicWindows
+{
+    return (_OSBehavior == CPApplicationFollowOSBehavior) && (CPBrowserIsOperatingSystem(CPWindowsOperatingSystem) || _simulatesWindows);
+}
+
+- (void)setSimulatesWindows:(BOOL)shouldSimulateWindows
+{
+    if (_simulatesWindows === shouldSimulateWindows)
+        return;
+
+    _simulatesWindows = shouldSimulateWindows;
+}
+
+- (BOOL)simulatesWindows
+{
+    return _simulatesWindows;
 }
 
 @end
@@ -1375,7 +1420,7 @@ var _CPAppBootstrapperActions = nil;
     var defaultThemeName = [CPApplication defaultThemeName],
         themeURL = nil;
 
-    if (defaultThemeName === @"Aristo" || defaultThemeName === @"Aristo2")
+    if (defaultThemeName === @"Aristo" || defaultThemeName === @"Aristo2" || defaultThemeName === @"Aristo3")
         themeURL = [[CPBundle bundleForClass:[CPApplication class]] pathForResource:defaultThemeName + @".blend"];
     else
         themeURL = [[CPBundle mainBundle] pathForResource:defaultThemeName + @".blend"];
@@ -1391,6 +1436,34 @@ var _CPAppBootstrapperActions = nil;
     [[CPApplication sharedApplication] setThemeBlend:aThemeBlend];
     [CPTheme setDefaultTheme:[CPTheme themeNamed:[CPApplication defaultThemeName]]];
 
+    // Search in the Info.plist if the special CPApplicationSimulateWindowsOS flag is set (for testing)
+    [CPApp setSimulatesWindows:!![[CPBundle mainBundle] objectForInfoDictionaryKey:"CPApplicationSimulateWindowsOS"]];
+
+    // Before loading the main CIB, try to find if a CPApplicationOSBehavior is specified in the Info.plist or in the user defaults
+    // (with user defaults precedence). Value stored must be a string representing the name of the OS behavior.
+    var plistOSBehavior = [[CPBundle mainBundle] objectForInfoDictionaryKey:"CPApplicationOSBehavior"],
+        userOSBehavior  = [[CPUserDefaults standardUserDefaults] objectForKey:@"CPApplicationOSBehavior"];
+
+    if (userOSBehavior)
+    {
+        var osBehavior = [CPApplicationOSBehaviors objectForKey:userOSBehavior];
+
+        if (osBehavior)
+            [CPApp setOSBehavior:osBehavior];
+        else
+            CPLog.warn("Invalid CPApplicationOSBehavior specified in user defaults (found:"+userOSBehavior+"). Ignored.");
+    }
+
+    else if (plistOSBehavior)
+    {
+        var osBehavior = [CPApplicationOSBehaviors objectForKey:plistOSBehavior];
+
+        if (osBehavior)
+            [CPApp setOSBehavior:osBehavior];
+        else
+            CPLog.warn("Invalid CPApplicationOSBehavior specified in Info.plist (found:"+plistOSBehavior+"). Ignored.");
+    }
+
     [self performActions];
 }
 

AppKit/CPApplication_Constants.j

@@ -39,3 +39,15 @@ CPTerminateLater    = -1; // not currently supported
 CPRunStoppedResponse    = -1000;
 CPRunAbortedResponse    = -1001;
 CPRunContinuesResponse  = -1002;
+
+// Should the application follow Cappuccino UX-UI (which is OSX like) or OS UX-UI (mainly Windows) ?
+// See explanation on https://github.com/cappuccino/cappuccino/wiki/CPApplicationSelectedOSBehavior
+@typedef CPApplicationOSBehavior
+CPApplicationLegacyOSBehavior = 1;
+CPApplicationFollowOSBehavior = 2;
+
+CPApplicationOSBehaviorDidChangeNotification = @"CPApplicationOSBehaviorDidChangeNotification";
+CPApplicationOSBehaviors                     = @{
+                                                 @"CPApplicationLegacyOSBehavior": CPApplicationLegacyOSBehavior,
+                                                 @"CPApplicationFollowOSBehavior": CPApplicationFollowOSBehavior
+                                                 };

AppKit/CPBox.j

@@ -285,7 +285,7 @@ CPBelowBottom = 6;
 // MARK: borderColor
 - (CPColor)borderColor
 {
-    return [self valueForThemeAttribute:@"border-color"];
+    return [self currentValueForThemeAttribute:@"border-color"];
 }
 
 - (void)setBorderColor:(CPColor)color
@@ -785,7 +785,7 @@ CPBelowBottom = 6;
             [_boxView setFrame:CGRectMake(0,2,bounds.size.width,1)];
         }
 
-        [_boxView setBackgroundColor:[self valueForThemeAttribute:@"border-color"]];
+        [_boxView setBackgroundColor:[self currentValueForThemeAttribute:@"border-color"]];
 
         return;
     }

AppKit/CPBrowser.j

@@ -153,7 +153,7 @@ var CPBrowserDelegate_browser_acceptDrop_atRow_column_dropOperation_
 
     _prototypeView = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
     [_prototypeView setVerticalAlignment:CPCenterVerticalTextAlignment];
-    [_prototypeView setValue:[CPColor whiteColor] forThemeAttribute:"text-color" inState:CPThemeStateSelectedDataView];
+    [_prototypeView setValue:[CPColor whiteColor] forThemeAttribute:"text-color" inState:CPThemeStateSelectedDataView.and(CPThemeStateTableDataView)];
     [_prototypeView setLineBreakMode:CPLineBreakByTruncatingTail];
 
     _horizontalScrollView = [[CPScrollView alloc] initWithFrame:[self bounds]];

AppKit/CPButton.j

@@ -98,7 +98,8 @@ var CPButtonBezelStyleStateMap = @{
         CPRegularSquareBezelStyle:      CPButtonStateBezelStyleRegularSquare,
         CPTexturedSquareBezelStyle:     CPButtonStateBezelStyleTextured,
         CPDisclosureBezelStyle:         CPButtonStateBezelStyleDisclosure,
-        CPRoundedDisclosureBezelStyle:  CPButtonStateBezelStyleRoundedDisclosure
+        CPRoundedDisclosureBezelStyle:  CPButtonStateBezelStyleRoundedDisclosure,
+        CPHUDBezelStyle:                CPThemeStateHUD
     };
 
 /// @cond IGNORE
@@ -707,12 +708,17 @@ CPButtonImageOffset   = 3.0;
 // Note : We have to split content and image visual states as, for example, radio buttons don't follow push buttons behavior
 - (CPThemeState)_contentVisualState
 {
-    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+    var visualState  = [self themeState] || CPThemeStateNormal,
         currentState = [self state],
         buttonIsOn   = (currentState !== CPOffState);
 
-    // If the button is pushed (_isHighlighted), always add the highlighted state
-    if (_isHighlighted || (((_showsStateBy & CPChangeGrayCellMask) || (_showsStateBy & CPChangeBackgroundCellMask)) && buttonIsOn))
+    // Define masks that imply the background changes color (Blue/Gray)
+    // If the background changes, we usually want the text to turn White (Highlighted state).
+    var highlightMask = CPPushInCellMask | CPChangeGrayCellMask | CPChangeBackgroundCellMask;
+
+    // Only add CPThemeStateHighlighted if the button is configured to highlight visually (Background change)
+    if ((_isHighlighted && (_highlightsBy & highlightMask)) || 
+        (((_showsStateBy & CPChangeGrayCellMask) || (_showsStateBy & CPChangeBackgroundCellMask)) && buttonIsOn))
         visualState = visualState.and(CPThemeStateHighlighted);
     else
         visualState = visualState.without(CPThemeStateHighlighted);

AppKit/CPComboBox.j

@@ -91,7 +91,7 @@ var CPComboBoxTextSubview = @"text",
 {
     return @{
                 @"popup-button-size": CGSizeMake(21.0, 29.0),
-                @"border-inset": CGInsetMake(3.0, 3.0, 3.0, 3.0),
+                @"border-inset": CGInsetMake(3.0, 3.0, 3.0, 3.0)
             };
 }
 
@@ -533,7 +533,7 @@ var CPComboBoxTextSubview = @"text",
         CPComboBoxFocusRingWidth = inset.bottom;
     }
 
-    [_listDelegate popUpRelativeToRect:[self _borderFrame] view:self offset:CPComboBoxFocusRingWidth - 1];
+    [_listDelegate popUpRelativeToRect:[self bounds] view:self offset:CPComboBoxFocusRingWidth - 1];
     [self _selectMatchingItem];
 }
 
@@ -570,6 +570,13 @@ var CPComboBoxTextSubview = @"text",
         _selectedStringValue = selectedStringValue;
 
     [self setStringValue:_selectedStringValue];
+
+    [self _updatePlaceholderState];
+
+#if PLATFORM(DOM)
+    [self _setCSSStyleForInputElement];
+#endif
+
     [self _reverseSetBinding];
 
     return YES;
@@ -975,23 +982,6 @@ var CPComboBoxTextSubview = @"text",
     }
 }
 
-/*!
-    Calculate the frame in base coordinates that will nestle just below the visible border of the text field.
-    @ignore
-*/
-- (CGRect)_borderFrame
-{
-    var inset = [self currentValueForThemeAttribute:@"border-inset"],
-        frame = [self bounds];
-
-    frame.origin.x += inset.left;
-    frame.origin.y += inset.top;
-    frame.size.width -= inset.left + inset.right;
-    frame.size.height -= inset.top + inset.bottom;
-
-    return frame;
-}
-
 /* @ignore */
 - (void)_popUpButtonWasClicked
 {

AppKit/CPControl.j

@@ -48,9 +48,10 @@
 CPRegularControlSize = 0;
 CPSmallControlSize   = 1;
 CPMiniControlSize    = 2;
+CPLargeControlSize   = 3; // Since MacOS 11, there's a new control size "Large"
 
 // To get the theme state corresponding to a control size, use CPControlSizeThemeStates[controlSize]
-CPControlSizeThemeStates = @[CPThemeStateControlSizeRegular, CPThemeStateControlSizeSmall, CPThemeStateControlSizeMini];
+CPControlSizeThemeStates = @[CPThemeStateControlSizeRegular, CPThemeStateControlSizeSmall, CPThemeStateControlSizeMini, CPThemeStateControlSizeLarge];
 
 @typedef CPLineBreakMode
 CPLineBreakByWordWrapping     = 0;
@@ -248,6 +249,9 @@ var CPControlBlackColor = [CPColor blackColor];
 
         case CPMiniControlSize:
             return CPThemeStateControlSizeMini;
+            
+        case CPLargeControlSize:
+            return CPThemeStateControlSizeLarge;
 
         case CPRegularControlSize:
         default:

AppKit/CPDatePicker/_CPDatePickerClock.j

@@ -24,14 +24,11 @@
 @import <Foundation/CPKeyedUnarchiver.j>
 @import "CPView.j"
 @import "CPTextField.j"
+@import "CPImageView.j"
 @import "CPImage.j"
-@import "CALayer.j"
 
 @class _CPCibCustomResource
 @class CPDatePicker
-@class HandImageLayer
-@class HoursLayer
-@class HandLayer
 
 @global CPHourMinuteSecondDatePickerElementFlag
 @global CPTextFieldAndStepperDatePickerStyle
@@ -47,15 +44,19 @@ _CPDatePickerClockSeconds = 3;
 @implementation _CPDatePickerClock : CPControl
 {
     BOOL                    _isEnabled;
-    HoursLayer              _rootLayer;
-    HandLayer               _hourHandLayer;
-    HandLayer               _minuteHandLayer;
-    HandLayer               _secondHandLayer;
-    CALayer                 _middleHandLayer;
-    CPDatePicker            _datePicker;
+    
+    // Pure DOM Views
+    CPImageView             _hourHandView;
+    CPImageView             _minuteHandView;
+    CPImageView             _secondHandView;
+    CPImageView             _middleHandView;
+    
+    CPArray                 _hourLabels;
     CPTextField             _PMAMTextField;
 
-    CALayer                 _currentHandLayer;
+    CPDatePicker            _datePicker;
+
+    CPView                  _currentHandView;
     _CPDatePickerClockHand  _currentHand;
     CPInteger               _currentRepresentedValue;
     float                   _currentValueShift;
@@ -67,9 +68,13 @@ _CPDatePickerClockSeconds = 3;
     CPInteger               _representedSeconds;
     BOOL                    _representedHourIsPM;
 
-    CPInteger                _datePickerElements         @accessors(getter=datePickerElements);
-}
+    // Angles for Hit-Testing
+    float                   _hourAngle;
+    float                   _minuteAngle;
+    float                   _secondAngle;
 
+    CPInteger               _datePickerElements @accessors(getter=datePickerElements);
+}
 
 // MARK: -
 // MARK: Init methods
@@ -81,69 +86,53 @@ _CPDatePickerClockSeconds = 3;
         _datePicker         = aDatePicker;
         _datePickerElements = [_datePicker datePickerElements];
         _trackingHand       = NO;
+        _isEnabled          = YES;
 
+        // 1. Initialize AM/PM Label
         _PMAMTextField = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
-
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-font" inState:CPThemeStateNormal] forThemeAttribute:@"font" inState:CPThemeStateNormal];
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-text-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-color" inState:CPThemeStateNormal];
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-text-shadow-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateNormal];
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-text-shadow-offset" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateNormal];
-
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-font" inState:CPThemeStateDisabled] forThemeAttribute:@"font" inState:CPThemeStateDisabled];
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-text-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-color" inState:CPThemeStateDisabled];
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-text-shadow-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateDisabled];
-        [_PMAMTextField setValue:[_datePicker valueForThemeAttribute:@"clock-text-shadow-offset" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateDisabled];
-
+        [_PMAMTextField setAlignment:CPCenterTextAlignment];
+        [_PMAMTextField setVerticalAlignment:CPCenterVerticalTextAlignment];
         [self addSubview:_PMAMTextField];
 
-        var middleHandSize = [_datePicker valueForThemeAttribute:@"middle-hand-size"],
-            minuteHandSize = [_datePicker valueForThemeAttribute:@"minute-hand-size"],
-            hourHandSize   = [_datePicker valueForThemeAttribute:@"hour-hand-size"],
-            secondHandSize = [_datePicker valueForThemeAttribute:@"second-hand-size"];
+        // 2. Initialize Number Labels (1 to 12)
+        _hourLabels = [CPArray array];
 
-        // We use layer to make the rotation possible
-        _hourHandLayer = [[HandLayer alloc] initWithSize:hourHandSize];
-        [_hourHandLayer setBounds:CGRectMake(0, 0, aFrame.size.width, aFrame.size.height)];
-        [_hourHandLayer setAnchorPoint:CGPointMakeZero()];
-        [_hourHandLayer setPosition:CGPointMake(0.0, 0.0)];
+        for (var i = 1; i <= 12; i++)
+        {
+            var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
+            [label setStringValue:String(i)];
+            [label setAlignment:CPCenterTextAlignment];
+            [label setVerticalAlignment:CPCenterVerticalTextAlignment];
+            [self addSubview:label];
+            [_hourLabels addObject:label];
+        }
 
-        _minuteHandLayer = [[HandLayer alloc] initWithSize:minuteHandSize];
-        [_minuteHandLayer setBounds:CGRectMake(0, 0, aFrame.size.width, aFrame.size.height)];
-        [_minuteHandLayer setAnchorPoint:CGPointMakeZero()];
-        [_minuteHandLayer setPosition:CGPointMake(0.0, 0.0)];
+        // 3. Initialize Hand Views
+        _hourHandView   = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
+        _minuteHandView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
+        _secondHandView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
+        _middleHandView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
 
-        _secondHandLayer = [[HandLayer alloc] initWithSize:secondHandSize];
-        [_secondHandLayer setBounds:CGRectMake(0, 0, aFrame.size.width, aFrame.size.height)];
-        [_secondHandLayer setAnchorPoint:CGPointMakeZero()];
-        [_secondHandLayer setPosition:CGPointMake(0.0, 0.0)];
+        // Ensure images stretch accurately across the bounds of the image view
+        [_hourHandView setImageScaling:CPImageScaleAxesIndependently];
+        [_minuteHandView setImageScaling:CPImageScaleAxesIndependently];
+        [_secondHandView setImageScaling:CPImageScaleAxesIndependently];
+        [_middleHandView setImageScaling:CPImageScaleAxesIndependently];
 
-        _middleHandLayer = [[HandLayer alloc] initWithSize:middleHandSize];
-        [_middleHandLayer setBounds:CGRectMake(0, 0, aFrame.size.width, aFrame.size.height)];
-        [_middleHandLayer setAnchorPoint:CGPointMakeZero()];
-        [_middleHandLayer setPosition:CGPointMake(0.0, 0.0)];
-
-        _rootLayer = [[HoursLayer alloc] init];
-        [self setWantsLayer:YES];
-        [self setLayer:_rootLayer];
-
-        [self _initHands];
-
-        [_rootLayer addSublayer:_hourHandLayer];
-        [_rootLayer addSublayer:_minuteHandLayer];
+        // 4. Add subviews in correct Z-Order
+        [self addSubview:_hourHandView];
+        [self addSubview:_minuteHandView];
 
         if ([_datePicker valueForThemeAttribute:@"clock-second-hand-over"])
         {
-            [_rootLayer addSublayer:_middleHandLayer];
-            [_rootLayer addSublayer:_secondHandLayer];
+            [self addSubview:_middleHandView];
+            [self addSubview:_secondHandView];
         }
         else
         {
-            [_rootLayer addSublayer:_secondHandLayer];
-            [_rootLayer addSublayer:_middleHandLayer];
+            [self addSubview:_secondHandView];
+            [self addSubview:_middleHandView];
         }
-
-        [_rootLayer setDrawsHours:[_datePicker valueForThemeAttribute:@"clock-draws-hours"]];
-        [_rootLayer setNeedsDisplay];
     }
 
     return self;
@@ -151,60 +140,58 @@ _CPDatePickerClockSeconds = 3;
 
 - (void)_initHands
 {
-    var middleHandImage = [_datePicker currentValueForThemeAttribute:@"middle-hand-image"],
-        hourHandImage   = [_datePicker currentValueForThemeAttribute:@"hour-hand-image"],
-        minuteHandImage = [_datePicker currentValueForThemeAttribute:@"minute-hand-image"],
-        secondHandImage = [_datePicker currentValueForThemeAttribute:@"second-hand-image"];
+    // FIX: Using 'duplicate' prevents CPImageViews from stealing the DOM element from each other!
+    [_middleHandView setImage:[[_datePicker currentValueForThemeAttribute:@"middle-hand-image"] duplicate]];
+    [_hourHandView   setImage:[[_datePicker currentValueForThemeAttribute:@"hour-hand-image"] duplicate]];
+    [_minuteHandView setImage:[[_datePicker currentValueForThemeAttribute:@"minute-hand-image"] duplicate]];
+    [_secondHandView setImage:[[_datePicker currentValueForThemeAttribute:@"second-hand-image"] duplicate]];
 
-    // If hand images are true CPImage, we have to duplicate them to avoid
-    // the multiple delegates bug when multiple clocks are displayed
+    var font       = [_datePicker currentValueForThemeAttribute:@"clock-font"],
+        textColor  = [_datePicker currentValueForThemeAttribute:@"clock-text-color"],
+        shadowCol  = [_datePicker currentValueForThemeAttribute:@"clock-text-shadow-color"],
+        shadowOff  = [_datePicker currentValueForThemeAttribute:@"clock-text-shadow-offset"];
 
-    if ([middleHandImage isKindOfClass:[CPImage class]])
-        middleHandImage = [middleHandImage duplicate];
+    if (font)
+        [_PMAMTextField setFont:font];
 
-    if ([hourHandImage isKindOfClass:[CPImage class]])
-        hourHandImage = [hourHandImage duplicate];
+    if (textColor)
+        [_PMAMTextField setTextColor:textColor];
 
-    if ([minuteHandImage isKindOfClass:[CPImage class]])
-        minuteHandImage = [minuteHandImage duplicate];
+    if (shadowCol)
+        [_PMAMTextField setTextShadowColor:shadowCol];
 
-    if ([secondHandImage isKindOfClass:[CPImage class]])
-        secondHandImage = [secondHandImage duplicate];
+    if (shadowOff)
+        [_PMAMTextField setTextShadowOffset:shadowOff];
 
-    [_middleHandLayer setImage:middleHandImage];
-    [_hourHandLayer   setImage:hourHandImage];
-    [_minuteHandLayer setImage:minuteHandImage];
-    [_secondHandLayer setImage:secondHandImage];
+    var hoursFont  = [_datePicker currentValueForThemeAttribute:@"clock-hours-font"],
+        hoursColor = [_datePicker currentValueForThemeAttribute:@"clock-hours-text-color"],
+        drawsHours = [_datePicker currentValueForThemeAttribute:@"clock-draws-hours"];
 
-    [_hourHandLayer   setNeedsDisplay];
-    [_middleHandLayer setNeedsDisplay];
-    [_secondHandLayer setNeedsDisplay];
-    [_minuteHandLayer setNeedsDisplay];
-
-    [_rootLayer setFont:[_datePicker currentValueForThemeAttribute:@"clock-hours-font"]];
-    [_rootLayer setTextColor:[_datePicker currentValueForThemeAttribute:@"clock-hours-text-color"]];
-    [_rootLayer setRadius:[_datePicker currentValueForThemeAttribute:@"clock-hours-radius"]];
-
-    [_rootLayer setNeedsDisplay];
+    for (var i = 0; i < 12; i++)
+    {
+        var label = _hourLabels[i];
+        [label setHidden:!drawsHours];
+        if (drawsHours) {
+            if (hoursFont)  [label setFont:hoursFont];
+            if (hoursColor) [label setTextColor:hoursColor];
+            [label sizeToFit];
+        }
+    }
 }
 
 - (void)setDatePickerElements:(CPInteger)aDatePickerElements
 {
     _datePickerElements = aDatePickerElements;
 
-    // Check if we have to display the hand second
-    // FIXME: Don't know why but next line will cause theme compilation to fail...
-    // Workaround: added "if PLATFORM(DOM)"
-#if PLATFORM(DOM)
-    [_secondHandLayer setHidden:!((_datePickerElements & CPHourMinuteSecondDatePickerElementFlag) == CPHourMinuteSecondDatePickerElementFlag)];
-#endif
+    [_secondHandView setHidden:!((_datePickerElements & CPHourMinuteSecondDatePickerElementFlag) == CPHourMinuteSecondDatePickerElementFlag)];
 }
 
 // MARK: Layout methods
 
 - (void)layoutSubviews
 {
-    // While tracking a hand, we don't want the whole thing to be relayouted at each mouse movement
+    [self _initHands];
+
     if (_trackingHand)
         return;
 
@@ -219,31 +206,65 @@ _CPDatePickerClockSeconds = 3;
     _representedSeconds  = dateValue.getSeconds();
     _representedHourIsPM = (_representedHours > 11);
 
-    // Hours are expressed in 24 hours format, we need 12 hours format
     _representedHours -= (_representedHourIsPM ? 12 : 0);
 
-    [self _updateHands];
+    var bounds  = [self bounds],
+        centerX = bounds.size.width / 2.0,
+        centerY = bounds.size.height / 2.0;
 
-    // FIXME: Workaround. Seems that CALayer doesn't redraw without an event
-    [CALayer runLoopUpdateLayers];
+    [_PMAMTextField setStringValue:_representedHourIsPM ? @"PM" : @"AM"];
+    [_PMAMTextField sizeToFit];
+    [_PMAMTextField setFrameOrigin:CGPointMake(centerX - [_PMAMTextField frameSize].width / 2.0, centerY + 15.0)];
+
+    if ([_datePicker currentValueForThemeAttribute:@"clock-draws-hours"])
+    {
+        var radius = [_datePicker currentValueForThemeAttribute:@"clock-hours-radius"] || 50.0;
+        for (var i = 0, angle = 60.0; i < 12; i++, angle -= 30.0)
+        {
+            var label = _hourLabels[i],
+                size  = [label frameSize],
+                x     = centerX + radius * COS(angle * RADIANS) - size.width / 2.0,
+                y     = centerY - radius * SIN(angle * RADIANS) - size.height / 2.0;
+
+            [label setFrameOrigin:CGPointMake(x, y)];
+        }
+    }
+
+    var centerView = function(view, size) {[view setFrame:CGRectMake(centerX - size.width / 2.0, centerY - size.height / 2.0, size.width, size.height)];
+    };
+
+    var hSize   = [_datePicker currentValueForThemeAttribute:@"hour-hand-size"]   || CGSizeMake(4, 64),
+        mSize   = [_datePicker currentValueForThemeAttribute:@"minute-hand-size"] || CGSizeMake(4, 96),
+        sSize   = [_datePicker currentValueForThemeAttribute:@"second-hand-size"] || CGSizeMake(4, 96),
+        midSize = [_datePicker currentValueForThemeAttribute:@"middle-hand-size"] || CGSizeMake(8, 8);
+
+    centerView(_hourHandView, hSize);
+    centerView(_minuteHandView, mSize);
+    centerView(_secondHandView, sSize);
+    centerView(_middleHandView, midSize);
+
+    [self _updateHands];
+}
+
+// Applies Pure CSS Transforms to rotate the elements natively in the browser
+- (void)_rotateView:(CPView)view byAngle:(float)radians
+{
+#if PLATFORM(DOM)
+    var style = view._DOMElement.style;
+    style[CPBrowserStyleProperty("transformOrigin")] = "50% 50%";
+    style[CPBrowserStyleProperty("transform")] = "rotate(" + radians + "rad)";
+#endif
 }
 
 - (void)_updateHands
 {
-    var bounds = [self bounds];
+    _hourAngle   = (360.0 * (_representedHours   + _representedMinutes / 60.0) / 12.0) * RADIANS;
+    _minuteAngle = (360.0 * (_representedMinutes + _representedSeconds / 60.0) / 60.0) * RADIANS;
+    _secondAngle = (360.0 * _representedSeconds / 60.0) * RADIANS;
 
-    [_PMAMTextField setStringValue:_representedHourIsPM ? @"PM" : @"AM"];
-    [_PMAMTextField sizeToFit];
-    [_PMAMTextField setFrameOrigin:CGPointMake(bounds.size.width / 2 - [_PMAMTextField frameSize].width / 2, bounds.size.height / 2 + 15)];
-
-    [_hourHandLayer   setRotationRadians:(360 * (_representedHours   + _representedMinutes / 60) / 12) * RADIANS];
-    [_minuteHandLayer setRotationRadians:(360 * (_representedMinutes + _representedSeconds / 60) / 60) * RADIANS];
-    [_secondHandLayer setRotationRadians:(360 * _representedSeconds / 60) * RADIANS];
-
-    [_hourHandLayer   setNeedsDisplay];
-    [_minuteHandLayer setNeedsDisplay];
-    [_secondHandLayer setNeedsDisplay];
-//    [_middleHandLayer setNeedsDisplay];
+    [self _rotateView:_hourHandView byAngle:_hourAngle];
+    [self _rotateView:_minuteHandView byAngle:_minuteAngle];
+    [self _rotateView:_secondHandView byAngle:_secondAngle];
 }
 
 // MARK: Accessors
@@ -257,12 +278,40 @@ _CPDatePickerClockSeconds = 3;
 
     _isEnabled = shouldEnable;
 
-    [self _initHands];
     [self setNeedsLayout];
 }
 
 // MARK: Mouse actions
 
+// Since we rotate using Pure CSS, Cappuccino's `convertPoint:` doesn't know about it.
+// So we use standard Trigonometry to perfectly hit-test the rotated hands!
+- (BOOL)_hitTestHandWithSize:(CGSize)size angle:(float)radians atPoint:(CGPoint)aPoint
+{
+    var bounds  = [self bounds],
+        centerX = bounds.size.width / 2.0,
+        centerY = bounds.size.height / 2.0;
+
+    // 1. Move point to center
+    var tx = aPoint.x - centerX,
+        ty = aPoint.y - centerY;
+
+    // 2. Rotate point backwards by the angle of the hand
+    var cosA = COS(-radians),
+        sinA = SIN(-radians),
+        rx   = tx * cosA - ty * sinA,
+        ry   = tx * sinA + ty * cosA;
+
+    // 3. Test if point is within the unrotated hand's rectangle
+    // The visual needle is in the top half of the hand's box (y from -h/2 to 0)
+    var w2 = size.width / 2.0,
+        h2 = size.height / 2.0;
+
+    if (rx >= -w2 && rx <= w2 && ry >= -h2 && ry <= 0)
+        return YES;
+
+    return NO;
+}
+
 - (void)mouseDown:(CPEvent)anEvent
 {
     if (!_isEnabled)
@@ -270,25 +319,29 @@ _CPDatePickerClockSeconds = 3;
 
     var currentLocation = [self convertPoint:[anEvent locationInWindow] fromView:nil];
 
-    if ([_secondHandLayer handIsHitAtPoint:currentLocation])
+    var sSize = [_datePicker currentValueForThemeAttribute:@"second-hand-size"] || CGSizeMake(4, 96),
+        mSize = [_datePicker currentValueForThemeAttribute:@"minute-hand-size"] || CGSizeMake(4, 96),
+        hSize = [_datePicker currentValueForThemeAttribute:@"hour-hand-size"]   || CGSizeMake(4, 64);
+
+    if (![_secondHandView isHidden] && [self _hitTestHandWithSize:sSize angle:_secondAngle atPoint:currentLocation])
     {
-        _currentHandLayer        = _secondHandLayer;
+        _currentHandView         = _secondHandView;
         _currentHand             = _CPDatePickerClockSeconds;
         _currentRepresentedValue = _representedSeconds;
         _currentValueShift       = 0;
         _numberOfUnits           = 60;
     }
-    else if ([_minuteHandLayer handIsHitAtPoint:currentLocation])
+    else if (![_minuteHandView isHidden] && [self _hitTestHandWithSize:mSize angle:_minuteAngle atPoint:currentLocation])
     {
-        _currentHandLayer        = _minuteHandLayer;
+        _currentHandView         = _minuteHandView;
         _currentHand             = _CPDatePickerClockMinutes;
         _currentRepresentedValue = _representedMinutes;
         _currentValueShift       = _representedSeconds / 60;
         _numberOfUnits           = 60;
     }
-    else if ([_hourHandLayer handIsHitAtPoint:currentLocation])
+    else if (![_hourHandView isHidden] && [self _hitTestHandWithSize:hSize angle:_hourAngle atPoint:currentLocation])
     {
-        _currentHandLayer        = _hourHandLayer;
+        _currentHandView         = _hourHandView;
         _currentHand             = _CPDatePickerClockHours;
         _currentRepresentedValue = _representedHours;
         _currentValueShift       = _representedMinutes / 60;
@@ -296,14 +349,14 @@ _CPDatePickerClockSeconds = 3;
     }
     else
     {
-        _currentHandLayer        = nil;
+        _currentHandView         = nil;
         _currentHand             = CPNotFound;
         _currentRepresentedValue = CPNotFound;
         _currentValueShift       = CPNotFound;
         _numberOfUnits           = CPNotFound;
     }
 
-    if (_currentHandLayer)
+    if (_currentHandView)
         [self trackMouse:anEvent];
 }
 
@@ -315,13 +368,12 @@ _CPDatePickerClockSeconds = 3;
 - (BOOL)startTrackingAt:(CGPoint)aPoint
 {
     _trackingHand = YES;
-
     return YES;
 }
 
 - (BOOL)continueTracking:(CGPoint)lastPoint at:(CGPoint)aPoint
 {
-    var dx    = aPoint.x -_bounds.size.width / 2,
+    var dx    = aPoint.x - _bounds.size.width / 2,
         dy    = _bounds.size.height / 2 - aPoint.y,
         angle = (PI_2 - ATAN2(dy,dx) + PI2) % PI2,
         value = ROUND(angle * _numberOfUnits / PI2 - _currentValueShift) % _numberOfUnits;
@@ -343,14 +395,10 @@ _CPDatePickerClockSeconds = 3;
                     _representedHourIsPM = !_representedHourIsPM;
 
                     if (movedForward && !_representedHourIsPM)
-                        // Day++
                         dateValue.setDate(dateValue.getDate() + 1);
-
                     else if (movedBackward && _representedHourIsPM)
-                        // Day--
                         dateValue.setDate(dateValue.getDate() - 1);
                 }
-
                 dateValue.setHours(value + (_representedHourIsPM ? 12 : 0));
                 break;
 
@@ -384,29 +432,26 @@ _CPDatePickerClockSeconds = 3;
 #if PLATFORM(DOM)
         _datePicker._invokedByUserEvent = YES;
 #endif
-        [_datePicker _setDateValue:dateValue timeInterval:[_datePicker timeInterval]];
+
+    [_datePicker _setDateValue:dateValue timeInterval:[_datePicker timeInterval]];
+
 #if PLATFORM(DOM)
         _datePicker._invokedByUserEvent = NO;
 #endif
 
-        // We have to adapt represented values
         _representedHours    = dateValue.getHours();
         _representedMinutes  = dateValue.getMinutes();
         _representedSeconds  = dateValue.getSeconds();
         _representedHourIsPM = (_representedHours > 11);
-
-        // Hours are expressed in 24 hours format, we need 12 hours format
         _representedHours -= (_representedHourIsPM ? 12 : 0);
 
         switch (_currentHand) {
             case _CPDatePickerClockHours:
                 _currentRepresentedValue = _representedHours;
                 break;
-
             case _CPDatePickerClockMinutes:
                 _currentRepresentedValue = _representedMinutes;
                 break;
-
             case _CPDatePickerClockSeconds:
                 _currentRepresentedValue = _representedSeconds;
                 break;
@@ -424,188 +469,3 @@ _CPDatePickerClockSeconds = 3;
 }
 
 @end
-
-// MARK: -
-
-@implementation HandLayer : CALayer
-{
-    CPImage         _image;
-    HandImageLayer  _imageLayer;
-    float           _rotationRadians;
-}
-
-// MARK: Init methods
-
-- (id)initWithSize:(CGSize)aSize
-{
-    if (self = [super init])
-    {
-        _imageLayer = [HandImageLayer layer];
-        _rotationRadians = 0;
-
-        [_imageLayer setDelegate:self];
-        [_imageLayer setBounds:CGRectMake(0.0, 0.0, aSize.width, aSize.height)];
-
-        [self addSublayer:_imageLayer];
-    }
-
-    return self;
-}
-
-
-// MARK: Setter Getter methods
-
-/*!
-    Set the bounds of the layer. The imageLayer will be at the center of this bounds.
-*/
-- (void)setBounds:(CGRect)aRect
-{
-    [super setBounds:aRect];
-
-    [_imageLayer setPosition:CGPointMake(CGRectGetMidX(aRect), CGRectGetMidY(aRect))];
-}
-
-- (void)setImage:(CPImage)anImage
-{
-    if (_image === anImage)
-        return;
-
-    if ([anImage isKindOfClass:[_CPCibCustomResource class]])
-        _image = [anImage imageFromCoder:nil];
-    else
-        _image = anImage;
-
-    [_imageLayer setNeedsDisplay];
-}
-
-- (void)setRotationRadians:(float)radians
-{
-    if (_rotationRadians === radians)
-        return;
-
-    _rotationRadians = radians;
-
-    [_imageLayer setAffineTransform:CGAffineTransformScale(
-        CGAffineTransformMakeRotation(_rotationRadians),
-        1.0, 1.0)];
-}
-
-- (void)imageDidLoad:(CPImage)anImage
-{
-    [_imageLayer setNeedsDisplay];
-}
-
-- (void)drawLayer:(CALayer)aLayer inContext:(CGContext)aContext
-{
-    if ([_image loadStatus] != CPImageLoadStatusCompleted)
-        [_image setDelegate:self];
-    else
-        CGContextDrawImage(aContext, [aLayer bounds], _image);
-}
-
-- (BOOL)handIsHitAtPoint:(CGPoint)aPoint
-{
-    return (!_isHidden && [_imageLayer hitTest:aPoint] === _imageLayer);
-}
-
-- (void)setNeedsDisplay
-{
-    [super       setNeedsDisplay];
-    [_imageLayer setNeedsDisplay];
-}
-
-@end
-
-// MARK: -
-
-@implementation HandImageLayer : CALayer
-{
-    CGRect  _handBounds;
-}
-
-// We have to adapt hitTest so it only takes the hand into account (that's the top half of the image layer)
-// We are also sure there's no sublayers
-- (CALayer)hitTest:(CGPoint)aPoint
-{
-    if (_isHidden)
-        return nil;
-
-    var point = CGPointApplyAffineTransform(aPoint, _transformToLayer);
-
-    return CGRectContainsPoint(_handBounds, point) ? self : nil;
-}
-
-- (void)setBounds:(CGRect)aBounds
-{
-    if (CGRectEqualToRect(_bounds, aBounds))
-        return;
-
-    _handBounds = CGRectMakeCopy(aBounds);
-
-    _handBounds.size.height = _handBounds.size.height / 2;
-
-    [super setBounds:aBounds];
-}
-
-
-@end
-
-// MARK: -
-
-@implementation HoursLayer : CALayer
-{
-    BOOL    _drawsHours;
-
-    CPFont  _font           @accessors(property=font);
-    CPColor _textColor      @accessors(property=textColor);
-    float   _radius         @accessors(property=radius);
-}
-
-
-- (id)init
-{
-    if (self = [super init])
-    {
-        _drawsHours = NO;
-    }
-
-    return self;
-}
-
-- (void)setDrawsHours:(BOOL)shouldDrawHours
-{
-    shouldDrawHours = !!shouldDrawHours;
-
-    if (_drawsHours === shouldDrawHours)
-        return;
-
-    _drawsHours = shouldDrawHours;
-    [self setNeedsDisplay];
-}
-
-- (void)drawInContext:(CGContext)aContext
-{
-    [super drawInContext:aContext];
-
-    if (_drawsHours)
-    {
-        var bounds = [self bounds],
-            centerX = bounds.size.width / 2,
-            centerY = bounds.size.height / 2;
-
-        CGContextSelectFont(aContext, _font);
-        CGContextSetFillColor(aContext, _textColor);
-        aContext.textBaseline = @"middle";
-        aContext.textAlign = @"center";
-
-        for (var i = 1, angle = 60.0, x, y; i < 13; i++, angle -= 30.0)
-        {
-            x = centerX + _radius * COS(angle * RADIANS);
-            y = centerY - _radius * SIN(angle * RADIANS);
-
-            aContext.fillText(i, x, y);
-        }
-    }
-}
-
-@end

AppKit/CPFont.j

@@ -220,7 +220,7 @@ following:
     if (systemFontStyle)
     {
         // Yes, so install it in the DOM Style element
-        document.getElementsByTagName("STYLE")[0].innerHTML += "\n" + [aTheme setCSSResourcesPathInString:systemFontStyle];
+        document.getElementsByTagName("STYLE")[0].innerHTML += "\n" + [aTheme setCSSResourcesPath:systemFontStyle];
     }
 }
 

AppKit/CPImageView.j

@@ -237,6 +237,8 @@ var CPImageViewEmptyPlaceholderImage = nil;
 
     if (_hasShadow)
     {
+        [self setClipsToBounds:NO];
+
         _shadowView = [[CPShadowView alloc] initWithFrame:[self bounds]];
 
         [self addSubview:_shadowView];
@@ -456,6 +458,12 @@ var CPImageViewEmptyPlaceholderImage = nil;
                                           styleNode:_cssStyleNode
                                       previousState:@ref(_cssStylePreviousState)];
     }
+
+    if ([image isCSSBased])
+    {
+        _DOMImageElement.style.width = _DOMImageElement.width + 'px';
+        _DOMImageElement.style.height = _DOMImageElement.height + 'px';
+    }
 #endif
 
     _imageRect = CGRectMake(x, y, width, height);

AppKit/CPLevelIndicator.j

@@ -88,43 +88,61 @@ CPRatingLevelIndicatorStyle                 = 3;
 
 - (void)layoutSubviews
 {
+    // 1. Calculate the Theme State
+    // We explicitly check the window style mask to see if we are in a HUD.
+    // This allows us to pass CPThemeStateHUD to the theme system, even if the control 
+    // itself isn't explicitly set to HUD, inheriting the style from the window.
+    var themeState = [self themeState];
+
+    if ([[self window] styleMask] & CPHUDBackgroundWindowMask)
+        themeState = themeState.and(CPThemeStateHUD);
+
+    // 2. Layout the Bezel
     var bezelView = [self layoutEphemeralSubviewNamed:"bezel"
                                            positioned:CPWindowBelow
                       relativeToEphemeralSubviewNamed:nil];
-    // TODO Make themable.
-    [bezelView setBackgroundColor:[self valueForThemeAttribute:@"bezel-color"]];
+    
+    [bezelView setBackgroundColor:[self valueForThemeAttribute:@"bezel-color" inState:themeState]];
 
     var segmentCount = _maxValue - _minValue;
 
     if (segmentCount <= 0)
         return;
 
-    var filledColor = [self valueForThemeAttribute:@"color-normal"],
+    // 3. Determine the Color based on Value and Thresholds
+    // We pass 'themeState' here. If it contains CPThemeStateHUD, the ThemeDescriptor 
+    // will return the monochrome color for normal/warning/critical. 
+    // If not, it returns Green/Yellow/Red.
+    var filledColor = [self valueForThemeAttribute:@"color-normal" inState:themeState],
         value = [self doubleValue];
 
     if (_warningValue < _criticalValue)
     {
+        // Standard ascending scale (e.g. Volume)
         if (value >= _criticalValue)
-            filledColor = [self valueForThemeAttribute:@"color-critical"];
+            filledColor = [self valueForThemeAttribute:@"color-critical" inState:themeState];
         else if (value >= _warningValue)
-            filledColor = [self valueForThemeAttribute:@"color-warning"];
+            filledColor = [self valueForThemeAttribute:@"color-warning" inState:themeState];
     }
     else
     {
+        // Descending scale (e.g. Battery Life)
         if (value <= _criticalValue)
-            filledColor = [self valueForThemeAttribute:@"color-critical"];
+            filledColor = [self valueForThemeAttribute:@"color-critical" inState:themeState];
         else if (value <= _warningValue)
-            filledColor = [self valueForThemeAttribute:@"color-warning"];
+            filledColor = [self valueForThemeAttribute:@"color-warning" inState:themeState];
     }
 
+    var emptyColor = [self valueForThemeAttribute:@"color-empty" inState:themeState];
 
+    // 4. Paint Segments
     for (var i = 0; i < segmentCount; i++)
     {
         var segmentView = [self layoutEphemeralSubviewNamed:"segment-bezel-" + i
                                                positioned:CPWindowAbove
                           relativeToEphemeralSubviewNamed:bezelView];
 
-        [segmentView setBackgroundColor:(_minValue + i) < value ? filledColor : [self valueForThemeAttribute:@"color-empty"]];
+        [segmentView setBackgroundColor:(_minValue + i) < value ? filledColor : emptyColor];
     }
 }
 
@@ -305,20 +323,6 @@ CPRatingLevelIndicatorStyle                 = 3;
     [self setNeedsLayout];
 }
 
-/*
-- (CPTickMarkPosition)tickMarkPosition;
-- (void)setTickMarkPosition:(CPTickMarkPosition)position;
-
-- (int)numberOfTickMarks;
-- (void)setNumberOfTickMarks:(int)count;
-
-- (int)numberOfMajorTickMarks;
-- (void)setNumberOfMajorTickMarks:(int)count;
-
-- (double)tickMarkValueAtIndex:(int)index;
-- (CGRect)rectOfTickMarkAtIndex:(int)index;
-*/
-
 @end
 
 var CPLevelIndicatorStyleKey                    = "CPLevelIndicatorStyleKey",

AppKit/CPMenu/CPMenu.j

@@ -274,6 +274,8 @@ var _CPMenuBarVisible               = NO,
 
         _autoenablesItems = YES;
         _showsStateColumn = YES;
+        
+        _themeState = CPThemeStateNormal;
 
         [self setMinimumWidth:0];
     }
@@ -286,6 +288,37 @@ var _CPMenuBarVisible               = NO,
     return [self initWithTitle:@""];
 }
 
+// Managing Theme States (HUD Support)
+
+- (void)setThemeState:(CPThemeState)aState
+{
+    if ([self hasThemeState:aState])
+        return;
+
+    _themeState = _themeState.and(aState);
+
+    // Propagate to the view if the menu is currently visible
+    if (_menuWindow)
+        [[_menuWindow _menuView] setThemeState:_themeState];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    if (![self hasThemeState:aState])
+        return;
+
+    _themeState = _themeState.without(aState);
+
+    // Propagate to the view if the menu is currently visible
+    if (_menuWindow)
+        [[_menuWindow _menuView] setThemeState:_themeState];
+}
+
+- (CPThemeState)themeState
+{
+    return _themeState;
+}
+
 // Setting Up Menu Commands
 /*!
     Inserts a menu item at the specified index.
@@ -798,6 +831,10 @@ var _CPMenuBarVisible               = NO,
     // Create the window for our menu.
     var menuWindow = [_CPMenuWindow menuWindowWithMenu:self font:[self font]];
 
+    // This pushes the state (e.g., CPThemeStateHUD) to the actual view that renders the menu
+    if (_themeState)
+        [[menuWindow _menuView] setThemeState:_themeState];
+
     [menuWindow setBackgroundStyle:_CPMenuWindowPopUpBackgroundStyle];
 
     if (anItem)
@@ -888,6 +925,10 @@ var _CPMenuBarVisible               = NO,
     var theWindow = [aView window],
         menuWindow = [_CPMenuWindow menuWindowWithMenu:aMenu font:aFont];
 
+    // --- APPLY THEME STATE FROM MENU OBJECT TO VIEW ---
+    if ([aMenu respondsToSelector:@selector(themeState)])
+        [[menuWindow _menuView] setThemeState:[aMenu themeState]];
+
     [menuWindow setBackgroundStyle:_CPMenuWindowPopUpBackgroundStyle];
 
     var constraintRect = [CPMenu _constraintRectForView:aView],
@@ -1328,6 +1369,9 @@ var CPMenuTitleKey              = @"CPMenuTitleKey",
 
         _autoenablesItems = ![aCoder containsValueForKey:CPMenuAutoEnablesItemsKey] || [aCoder decodeBoolForKey:CPMenuAutoEnablesItemsKey];
 
+        // Ensure theme state is initialized to avoid undefined issues.
+        _themeState = CPThemeStateNormal;
+
         [self setMinimumWidth:0];
     }
 

AppKit/CPMenu/_CPMenuWindow.j

@@ -62,6 +62,9 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
 
         // Do this so that coordinates will be accurate.
         [menuWindow setFrameOrigin:CGPointMakeZero()];
+        // we need to reset the HUD state as this may be a recycled instance with HUD rund on non-HUD      
+        [[menuWindow _windowView] unsetThemeState:CPThemeStateHUD];
+        [[menuWindow _menuView] unsetThemeState:CPThemeStateHUD];
     }
     else
         menuWindow = [[_CPMenuWindow alloc] init];
@@ -108,23 +111,33 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
         [contentView addSubview:_menuClipView];
 
         _moreAboveView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
-
-        [_moreAboveView setImage:[_menuView valueForThemeAttribute:@"menu-window-more-above-image"]];
-        [_moreAboveView setFrameSize:[[_menuView valueForThemeAttribute:@"menu-window-more-above-image"] size]];
-
         [contentView addSubview:_moreAboveView];
 
         _moreBelowView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
-
-        [_moreBelowView setImage:[_menuView valueForThemeAttribute:@"menu-window-more-below-image"]];
-        [_moreBelowView setFrameSize:[[_menuView valueForThemeAttribute:@"menu-window-more-below-image"] size]];
-
         [contentView addSubview:_moreBelowView];
+
+        // Initial setup using default attributes
+        [self updateScrollArrows];
     }
 
     return self;
 }
 
+- (void)updateScrollArrows
+{
+    if (!_menuView)
+        return;
+
+    var aboveImage = [_menuView currentValueForThemeAttribute:@"menu-window-more-above-image"],
+        belowImage = [_menuView currentValueForThemeAttribute:@"menu-window-more-below-image"];
+
+    [_moreAboveView setImage:aboveImage];
+    [_moreAboveView setFrameSize:[aboveImage size]];
+
+    [_moreBelowView setImage:belowImage];
+    [_moreBelowView setFrameSize:[belowImage size]];
+}
+
 + (float)_standardLeftMargin
 {
     return [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-window-margin-inset" forClass:_CPMenuView].left;
@@ -162,7 +175,12 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
 
 - (void)setBackgroundStyle:(_CPMenuWindowBackgroundStyle)aBackgroundStyle
 {
-    [self setBackgroundColor:[[self class] backgroundColorForBackgroundStyle:aBackgroundStyle]];
+    var color = [_menuView currentValueForThemeAttribute:@"menu-window-pop-up-background-style-color"];
+
+    if (!color)
+        color = [[self class] backgroundColorForBackgroundStyle:aBackgroundStyle];
+
+    [self setBackgroundColor:color];
 }
 
 - (void)setMenu:(CPMenu)aMenu
@@ -237,16 +255,29 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
     // If we are a submenu and we are being displayed off the right of the screen,
     // we should try and display on the left of our supermenu.
     var supermenu = [[self menu] supermenu];
-    if (supermenu && (CGRectGetMaxX(_unconstrainedFrame) > CGRectGetMaxX(_constraintRect)))
+
+    if (supermenu)
     {
-        var supermenuWindow = supermenu._menuWindow;
-        if (supermenuWindow)
+        if (CGRectGetMaxX(_unconstrainedFrame) > CGRectGetMaxX(_constraintRect))
         {
-            var supermenuFrame = [supermenuWindow frame];
-            _unconstrainedFrame.origin.x = CGRectGetMinX(supermenuFrame) - CGRectGetWidth(_unconstrainedFrame);
+            var supermenuWindow = supermenu._menuWindow;
+            if (supermenuWindow)
+            {
+                var supermenuFrame = [supermenuWindow frame];
+                _unconstrainedFrame.origin.x = CGRectGetMinX(supermenuFrame) - CGRectGetWidth(_unconstrainedFrame);
+            }
         }
+        
+        // Shift true submenus vertically to fit within the screen if they extend past the bottom
+        if (supermenu !== [CPApp mainMenu] && CGRectGetMaxY(_unconstrainedFrame) > CGRectGetMaxY(_constraintRect))
+            _unconstrainedFrame.origin.y -= CGRectGetMaxY(_unconstrainedFrame) - CGRectGetMaxY(_constraintRect);
     }
 
+    // Ensure no menu starts above the visible screen area, preventing it from incorrectly 
+    // starting scrolled with a top arrow.
+    if (CGRectGetMinY(_unconstrainedFrame) < CGRectGetMinY(_constraintRect))
+        _unconstrainedFrame.origin.y = CGRectGetMinY(_constraintRect);
+
     var constrainedFrame = CGRectIntersection(_unconstrainedFrame, _constraintRect),
         marginInset = [_menuView valueForThemeAttribute:@"menu-window-margin-inset"],
         scrollIndicatorHeight = [_menuView valueForThemeAttribute:@"menu-window-scroll-indicator-height"];
@@ -268,7 +299,8 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
     [super setFrame:constrainedFrame display:shouldDisplay animate:shouldAnimate];
 
     // This needs to happen before changing the frame.
-    var menuViewOrigin = CGPointMake(CGRectGetMinX(aFrame) + marginInset.left, CGRectGetMinY(aFrame) + marginInset.top),
+    // Base the view origin on our modified _unconstrainedFrame instead of aFrame
+    var menuViewOrigin = CGPointMake(CGRectGetMinX(_unconstrainedFrame) + marginInset.left, CGRectGetMinY(_unconstrainedFrame) + marginInset.top),
         moreAbove = menuViewOrigin.y < CGRectGetMinY(constrainedFrame) + marginInset.top,
         moreBelow = menuViewOrigin.y + CGRectGetHeight([_menuView frame]) > CGRectGetMaxY(constrainedFrame) - marginInset.bottom,
 
@@ -502,6 +534,21 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
         };
 }
 
+- (void)setThemeState:(CPThemeState)aState
+{
+    [super setThemeState:aState];
+    [_menuItemViews makeObjectsPerformSelector:@selector(setThemeState:) withObject:aState];
+
+    if ([[self window] respondsToSelector:@selector(updateScrollArrows)])
+        [[self window] updateScrollArrows];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    [super unsetThemeState:aState];
+    [_menuItemViews makeObjectsPerformSelector:@selector(unsetThemeState:) withObject:aState];
+}
+
 - (unsigned)numberOfUnhiddenItems
 {
     return _visibleMenuItemInfos.length;

AppKit/CPMenuItem/_CPMenuItemStandardView.j

@@ -145,6 +145,26 @@
     return self;
 }
 
+- (void)setThemeState:(CPThemeState)aState
+{
+    var oldState = [self themeState];
+    [super setThemeState:aState];
+    // If the state changed (e.g. adding HUD), we must re-run update
+    // to fetch the new text color defined for that state.
+    if (oldState !== [self themeState])
+        [self update];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    var oldState = [self themeState];
+    [super unsetThemeState:aState];
+    
+    if (oldState !== [self themeState])
+        [self update];
+}
+
+
 - (CPColor)textColor
 {
     if (![_menuItem isEnabled])
@@ -153,7 +173,7 @@
     if (_highlighted)
         return [CPColor whiteColor];
 
-    return [self valueForThemeAttribute:@"menu-item-text-color"];
+    return [self currentValueForThemeAttribute:@"menu-item-text-color"];
 }
 
 - (CPColor)textShadowColor
@@ -164,7 +184,7 @@
     if (_highlighted)
         return nil;
 
-    return [self valueForThemeAttribute:@"menu-item-text-shadow-color"];
+    return [self currentValueForThemeAttribute:@"menu-item-text-shadow-color"];
 }
 
 - (void)setFont:(CPFont)aFont
@@ -178,6 +198,11 @@
     return _font || [_menuItem font] || [CPFont systemFontOfSize:CPFontCurrentSystemSize];
 }
 
+// override needed to cancel out the standard HUD propagation
+- (void)viewDidMoveToWindow
+{
+}
+
 // FIXME: update is called 2 times at each display. Find why and fix.
 - (void)update
 {
@@ -188,6 +213,8 @@
 
         // When possible, use specific vertical margin/offset value based on font size (which could have been set by control size)
         correspondingControlSize = [myFont controlSizeCorrespondingToFontSize],
+        controlSizeState = CPControlSizeThemeStates[correspondingControlSize],
+        queryState = [self themeState] ? [self themeState].and(controlSizeState) : controlSizeState,
         verticalMargin = [self valueForThemeAttribute:@"vertical-margin" inState:CPControlSizeThemeStates[correspondingControlSize]],
         verticalOffset = [self valueForThemeAttribute:@"vertical-offset" inState:CPControlSizeThemeStates[correspondingControlSize]];
 
@@ -199,15 +226,15 @@
         switch ([_menuItem state])
         {
             case CPOnState:
-                [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:queryState] || [_menuItem onStateImage]];
                 break;
 
             case CPOffState:
-                [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:queryState] || [_menuItem offStateImage]];
                 break;
 
             case CPMixedState:
-                [_stateView setImage:[_menuItem mixedStateImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:queryState] || [_menuItem mixedStateImage]];
                 break;
 
             default:
@@ -326,7 +353,10 @@
 
     _highlighted = shouldHighlight;
 
-    var correspondingControlSize = [[self font] controlSizeCorrespondingToFontSize];
+    var correspondingControlSize = [[self font] controlSizeCorrespondingToFontSize],
+        // Construct the query state including the view's current theme state (e.g. HUD)
+        controlSizeState = CPControlSizeThemeStates[correspondingControlSize],
+        queryState = [self themeState] ? [self themeState].and(controlSizeState) : controlSizeState;
 
     [_imageAndTextView setTextColor:[self textColor]];
     [_keyEquivalentView setTextColor:[self textColor]];
@@ -339,7 +369,7 @@
         [_imageAndTextView setImage:[_menuItem alternateImage] || [_menuItem image]];
 
         if (_hasSubmenuIndicatorImage)
-            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-highlighted-image" inState:queryState]];
         else
             [_submenuIndicatorView setColor:[self textColor]];
     }
@@ -349,7 +379,7 @@
         [_imageAndTextView setImage:[_menuItem image]];
 
         if (_hasSubmenuIndicatorImage)
-            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-image" inState:queryState]];
         else
             [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
     }
@@ -361,15 +391,15 @@
             switch ([_menuItem state])
             {
                 case CPOnState:
-                    [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                    [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-highlighted-image" inState:queryState]];
                     break;
 
                 case CPOffState:
-                    [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                    [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-highlighted-image" inState:queryState]];
                     break;
 
                 case CPMixedState:
-                    [_stateView setImage:[_menuItem mixedImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                    [_stateView setImage:[_menuItem mixedImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-highlighted-image" inState:queryState]];
                     break;
 
                 default:
@@ -381,15 +411,15 @@
             switch ([_menuItem state])
             {
                 case CPOnState:
-                    [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                    [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:queryState]];
                     break;
 
                 case CPOffState:
-                    [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                    [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:queryState]];
                     break;
 
                 case CPMixedState:
-                    [_stateView setImage:[_menuItem mixedImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+                    [_stateView setImage:[_menuItem mixedImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:queryState]];
                     break;
 
                 default:

AppKit/CPMenuItem/_CPMenuItemView.j

@@ -83,6 +83,28 @@
     return self;
 }
 
+// override needed to cancel out the standard HUD propagation
+- (void)viewDidMoveToWindow
+{
+}
+
+- (void)setThemeState:(CPThemeState)aState
+{
+    [super setThemeState:aState];
+
+    // Propagate state to the actual content view (StandardView, Separator, etc.)
+    if ([_view respondsToSelector:@selector(setThemeState:)])
+        [_view setThemeState:aState];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    [super unsetThemeState:aState];
+    
+    if ([_view respondsToSelector:@selector(unsetThemeState:)])
+        [_view unsetThemeState:aState];
+}
+
 - (CGSize)minSize
 {
     return _minSize;

AppKit/CPOutlineView.j

@@ -23,6 +23,7 @@
 @import "CPButton.j"
 @import "CPTableColumn.j"
 @import "CPTableView.j"
+@import "CPViewAnimation.j"
 
 @global CPApp
 
@@ -285,6 +286,12 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
 
     CPArray                         _pendingItemToClean;
     CPArray                         _itemAddedDuringLastLoading;
+
+    CPIndexSet                      _animatingDisclosureRows;
+
+    BOOL                            _animates @accessors(property=animates);
+    CPViewAnimation                 _rowsAnimation;
+    CPArray                         _animationGhosts;
 }
 
 - (id)initWithFrame:(CGRect)aFrame
@@ -315,6 +322,9 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
         [super setDelegate:self];
 
         [self setDisclosureControlPrototype:[[CPDisclosureButton alloc] initWithFrame:CGRectMake(0.0, 0.0, 10.0, 10.0)]];
+
+        _animatingDisclosureRows = [CPIndexSet indexSet];
+        _animates = YES;
     }
 
     return self;
@@ -325,12 +335,22 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
     _BlockDeselectView = function(view, row, column)
     {
         [view unsetThemeState:CPThemeStateSelectedDataView];
+        // Ensure we clear the focus state so the text goes back to normal color
+        [view unsetThemeState:CPThemeStateFirstResponder];
+        
         [_disclosureControlsForRows[row] unsetThemeState:CPThemeStateSelected];
     };
 
     _BlockSelectView = function(view, row, column)
     {
         [view setThemeState:CPThemeStateSelectedDataView];
+
+        // If the table is focused, apply the state that turns text white immediately
+        if ([self _isFocused])
+            [view setThemeState:CPThemeStateFirstResponder];
+        else
+            [view unsetThemeState:CPThemeStateFirstResponder];
+
         [_disclosureControlsForRows[row] setThemeState:CPThemeStateSelected];
     };
 }
@@ -482,6 +502,60 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
     return itemInfo.shouldShowOutlineDisclosureControl;
 }
 
+- (void)_noteDisclosureAnimationWillStartForRow:(CPInteger)aRow
+{
+    [_animatingDisclosureRows addIndex:aRow];
+    // We do not need to setNeedsDisplay here because the button itself 
+    // will trigger a redraw when its state changes or when the animation setup occurs.
+}
+
+- (void)_noteDisclosureAnimationDidStopForRow:(CPInteger)aRow
+{
+    [_animatingDisclosureRows removeIndex:aRow];
+    
+    // Explicitly find the button for this row and force it to redraw.
+    // The button was returning early from drawRect during the animation.
+    // Now that the flag is cleared, we must tell it to paint again.
+    if (_disclosureControlsForRows && aRow < _disclosureControlsForRows.length)
+    {
+        var button = _disclosureControlsForRows[aRow];
+
+        if (button)
+            [button display];
+    }
+}
+- (BOOL)_isRowAnimatingDisclosure:(CPInteger)aRow
+{
+    return [_animatingDisclosureRows containsIndex:aRow];
+}
+
+- (CPInteger)rowForView:(CPView)aView
+{
+    // 1. Try the standard lookup (for normal cells)
+    var row = [super rowForView:aView];
+
+    if (row !== CPNotFound)
+        return row;
+
+    // 2. If not found, check if it is a disclosure button
+    if ([aView isKindOfClass:[CPDisclosureButton class]])
+    {
+        // Check the list of active disclosure buttons
+        // _disclosureControlsForRows is a native JS array, so we use indexOf
+        var index = _disclosureControlsForRows.indexOf(aView);
+
+        if (index > -1)
+            return index;
+
+        // 3. Check if it is an animation clone (from the fix in the previous step)
+        // The clone is not in the array, but it carries the row index.
+        if (aView._animatingRowIndex !== undefined && aView._animatingRowIndex !== null)
+            return aView._animatingRowIndex;
+    }
+
+    return CPNotFound;
+}
+
 /*!
     Used to find if an item is already expanded.
 
@@ -621,6 +695,9 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
 */
 - (void)expandItem:(id)anItem expandChildren:(BOOL)shouldExpandChildren
 {
+    var oldRowCount = [self numberOfRows],
+        parentIndex = [self rowForItem:anItem];
+
     if ([self _delegateRespondsToShouldExpandItem])
         if ([_outlineViewDelegate outlineView:self shouldExpandItem:anItem] == NO)
             return;
@@ -663,7 +740,7 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
         if (rowCountDelta)
         {
             var selection = [self selectedRowIndexes],
-                expandIndex = [self rowForItem:anItem] + 1;
+                expandIndex = parentIndex + 1;
 
             if ([selection intersectsIndexesInRange:CPMakeRange(expandIndex, _itemsForRows.length)])
             {
@@ -690,6 +767,17 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
         if (r === CPOutlineViewCoalesceSelectionNotificationStateDid)
             [self _noteSelectionDidChange];
     }
+
+    // FIX: Animation logic moved to the end to match Version 1 behavior.
+    // This ensures views are ready and handles both single and recursive expansion.
+    var newRowCount = [self numberOfRows],
+        addedCount = newRowCount - oldRowCount;
+
+    if (_animates && addedCount > 0)
+    {
+        [self layoutSubviews]; // Force views to spawn so we can animate them
+        [self _animateExpandFromIndex:parentIndex addedCount:addedCount];
+    }
 }
 
 /*!
@@ -702,29 +790,30 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
     if (!anItem)
         return;
 
+    var collapseTopIndex = [self rowForItem:anItem];
+
+    // FIX 1: Safety check to prevent "jumping". 
+    // If the parent row isn't found or invisible, we cannot animate.
+    if (collapseTopIndex === CPNotFound || collapseTopIndex < 0)
+        return;
+
     if ([self _delegateRespondsToShouldCollapseItem])
         if ([_outlineViewDelegate outlineView:self shouldCollapseItem:anItem] == NO)
             return;
 
     var itemInfo = _itemInfosForItems[[anItem UID]];
 
-    if (!itemInfo)
+    if (!itemInfo || !itemInfo.isExpanded)
         return;
 
-    if (!itemInfo.isExpanded)
-        return;
-
-    // Don't spam notifications.
     _coalesceSelectionNotificationState = CPOutlineViewCoalesceSelectionNotificationStateOn;
 
     [self _noteItemWillCollapse:anItem];
-    // Update selections:
-    // * Deselect items inside the collapsed item.
-    // * Shift row selections below the collapsed item so that the same logical items remain selected.
-    var collapseTopIndex = [self rowForItem:anItem],
-        topLevel = [self levelForRow:collapseTopIndex],
+
+    var topLevel = [self levelForRow:collapseTopIndex],
         collapseEndIndex = collapseTopIndex;
 
+    // Calculate how many items are being removed
     while (collapseEndIndex + 1 < _itemsForRows.length && [self levelForRow:collapseEndIndex + 1] > topLevel)
         collapseEndIndex++;
 
@@ -738,31 +827,288 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
         {
             [self _noteSelectionIsChanging];
             [selection removeIndexesInRange:collapseRange];
-            [self _setSelectedRowIndexes:selection]; // _noteSelectionDidChange will be suppressed.
+            [self _setSelectedRowIndexes:selection]; 
         }
 
-        // Shift any selected rows below upwards.
         if ([selection intersectsIndexesInRange:CPMakeRange(collapseEndIndex + 1, _itemsForRows.length)])
         {
             [self _noteSelectionIsChanging];
             [selection shiftIndexesStartingAtIndex:collapseEndIndex + 1 by:-collapseRange.length];
-            [self _setSelectedRowIndexes:selection]; // _noteSelectionDidChange will be suppressed.
+            [self _setSelectedRowIndexes:selection];
         }
     }
 
-    itemInfo.isExpanded = NO;
+    // Capture visual ghosts BEFORE the data is removed
+    var ghosts = nil;
+    if (_animates && collapseRange.length > 0)
+        ghosts = [self _createGhostsForRowsFrom:collapseRange.location to:CPMaxRange(collapseRange) - 1];
 
+    // Collapse the model
+    itemInfo.isExpanded = NO;
     [self reloadItem:anItem reloadChildren:YES];
     [self _noteItemDidCollapse:anItem];
 
-    // Send selection notifications only after the items have loaded so that
-    // the new selection is consistent with the actual rows for any observers.
+    // Trigger Animation
+    if (_animates && collapseRange.length > 0)
+    {
+        [self layoutSubviews]; 
+        [self _animateCollapseFromIndex:collapseTopIndex removedCount:collapseRange.length ghosts:ghosts];
+    }
+
     var r = _coalesceSelectionNotificationState;
     _coalesceSelectionNotificationState = CPOutlineViewCoalesceSelectionNotificationStateOff;
+
     if (r === CPOutlineViewCoalesceSelectionNotificationStateDid)
         [self _noteSelectionDidChange];
 }
 
+- (void)_animateCollapseFromIndex:(CPInteger)parentIndex removedCount:(CPInteger)removedCount ghosts:(CPArray)ghosts
+{
+    // Ensure we don't animate if parent is invalid
+    if (parentIndex < 0)
+        return;
+
+    if (_rowsAnimation && [_rowsAnimation isAnimating])
+        [_rowsAnimation stopAnimation];
+
+    var viewAnimations = [],
+        // The Y position the ghosts will slide INTO (the parent row's Y position)
+        parentY = [self frameOfDataViewAtColumn:0 row:parentIndex].origin.y;
+
+    // Calculate shift offset based on ghost height or row height
+    var shiftOffset = 0;
+    if (ghosts && ghosts.length > 0)
+    {
+        var firstGhostFrame = [ghosts[0] frame],
+            maxY = CGRectGetMaxY(firstGhostFrame);
+        for(var i = 1; i < ghosts.length; i++)
+            maxY = MAX(maxY, CGRectGetMaxY([ghosts[i] frame]));
+        shiftOffset = maxY - firstGhostFrame.origin.y;
+    }
+    else
+    {
+        shiftOffset = removedCount * [self rowHeight];
+    }
+
+    // 1. Ghost views slide up into parent and fade out
+    if (ghosts)
+    {
+        for (var i = 0; i < ghosts.length; i++)
+        {
+            var ghost = ghosts[i],
+                startFrame = [ghost frame],
+                targetFrame = CGRectMake(startFrame.origin.x, parentY, startFrame.size.width, startFrame.size.height);
+            
+            // FIX 3: Removed [self addSubview:positioned:relativeTo:] 
+            // Ghosts remain at the top of the view stack (where they were created) 
+            // ensuring they are visible and don't get hidden behind the background.
+            
+            [viewAnimations addObject:@{
+                CPViewAnimationTargetKey: ghost,
+                CPViewAnimationStartFrameKey: startFrame,
+                CPViewAnimationEndFrameKey: targetFrame,
+                CPViewAnimationEffectKey: CPViewAnimationFadeOutEffect
+            }];
+        }
+    }
+
+    // 2. Siblings (rows below the collapsed group) slide UP to fill the gap
+    var columns = [self tableColumns],
+        colIndexes = [CPIndexSet indexSetWithIndexesInRange:CPMakeRange(0, columns.length)],
+        startIndex = parentIndex + 1,
+        rowCount = [self numberOfRows];
+    
+    // FIX 4: Only animate rows that actually exist after the parent
+    if (startIndex < rowCount)
+    {
+        var rowIndexes = [CPIndexSet indexSetWithIndexesInRange:CPMakeRange(startIndex, rowCount - startIndex)];
+        
+        [self _enumerateViewsInRows:rowIndexes columns:colIndexes usingBlock:function(view, row, column, stop) {
+            
+            var targetFrame = [view frame];
+            
+            // Siblings start lower (at target Y + shift) and move UP to target Y
+            var startFrame = CGRectMake(targetFrame.origin.x, targetFrame.origin.y + shiftOffset, targetFrame.size.width, targetFrame.size.height);
+            
+            [view setFrame:startFrame];
+            
+            [viewAnimations addObject:@{
+                CPViewAnimationTargetKey: view,
+                CPViewAnimationStartFrameKey: startFrame,
+                CPViewAnimationEndFrameKey: targetFrame
+            }];
+        }];
+        
+        // Also animate disclosure triangles for the siblings
+        var disclosureRows = [];
+        [rowIndexes getIndexes:disclosureRows maxCount:-1 inIndexRange:nil];
+        
+        for (var i = 0; i < disclosureRows.length; i++)
+        {
+            var btn = _disclosureControlsForRows[disclosureRows[i]];
+            if (btn)
+            {
+                var targetBtnFrame = [btn frame],
+                    startBtnFrame = CGRectMake(targetBtnFrame.origin.x, targetBtnFrame.origin.y + shiftOffset, targetBtnFrame.size.width, targetBtnFrame.size.height);
+                
+                [btn setFrame:startBtnFrame];
+                
+                [viewAnimations addObject:@{
+                    CPViewAnimationTargetKey: btn,
+                    CPViewAnimationStartFrameKey: startBtnFrame,
+                    CPViewAnimationEndFrameKey: targetBtnFrame
+                }];
+            }
+        }
+    }
+
+    [self _runAnimation:viewAnimations withGhosts:ghosts];
+}
+
+// MARK: - CPRuleEditor Style Animations
+
+- (CPArray)_createGhostsForRowsFrom:(CPInteger)startRow to:(CPInteger)endRow
+{
+    var ghosts = [];
+    var columns = [self tableColumns];
+    var rowIndexes =[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(startRow, endRow - startRow + 1)];
+    var colIndexes =[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(0, columns.length)];[self _enumerateViewsInRows:rowIndexes columns:colIndexes usingBlock:function(view, row, column, stop) {
+        var ghost = [[CPView alloc] initWithFrame:[view frame]];
+        if (view._DOMElement)
+            ghost._DOMElement.innerHTML = view._DOMElement.innerHTML;
+        [self addSubview:ghost];
+        [ghosts addObject:ghost];
+    }];
+    
+    var disclosureRows = [];[rowIndexes getIndexes:disclosureRows maxCount:-1 inIndexRange:nil];
+    for (var i = 0; i < disclosureRows.length; i++)
+    {
+        var btn = _disclosureControlsForRows[disclosureRows[i]];
+        if (btn)
+        {
+            var ghostBtn = [[CPView alloc] initWithFrame:[btn frame]];
+            if (btn._DOMElement)
+                ghostBtn._DOMElement.innerHTML = btn._DOMElement.innerHTML;[self addSubview:ghostBtn];
+            [ghosts addObject:ghostBtn];
+        }
+    }
+    
+    return ghosts;
+}
+
+- (void)_animateExpandFromIndex:(CPInteger)parentIndex addedCount:(CPInteger)addedCount
+{
+    if (_rowsAnimation && [_rowsAnimation isAnimating])
+        [_rowsAnimation stopAnimation];
+
+    var viewAnimations = [];
+    var columns = [self tableColumns];
+    var colIndexes = [CPIndexSet indexSetWithIndexesInRange:CPMakeRange(0, columns.length)];
+    
+    var startIndex = parentIndex + 1;
+    var rowIndexes =[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(startIndex, [self numberOfRows] - startIndex)];
+    var parentY = parentIndex >= 0 ? [self frameOfDataViewAtColumn:0 row:parentIndex].origin.y : 0;
+    
+    // Safely calculate the shift gap even with variable row heights
+    var shiftOffset = 0;
+    if (addedCount > 0 && (startIndex + addedCount) < [self numberOfRows])
+    {
+        var firstNewTarget = [self frameOfDataViewAtColumn:0 row:startIndex].origin.y;
+        var firstDisplacedTarget = [self frameOfDataViewAtColumn:0 row:startIndex + addedCount].origin.y;
+        shiftOffset = firstDisplacedTarget - firstNewTarget;
+    }
+    else
+        shiftOffset = addedCount * [self rowHeight];[self _enumerateViewsInRows:rowIndexes columns:colIndexes usingBlock:function(view, row, column, stop) {
+        var isNewRow = (row < startIndex + addedCount);
+        var targetFrame = [view frame];
+        var startFrame;
+        var animDict = @{ CPViewAnimationTargetKey: view, CPViewAnimationEndFrameKey: targetFrame };
+
+        if (isNewRow)
+        {
+            startFrame = CGRectMake(targetFrame.origin.x, parentY, targetFrame.size.width, targetFrame.size.height);
+            [animDict setObject:CPViewAnimationFadeInEffect forKey:CPViewAnimationEffectKey];[view setAlphaValue:0.0];
+        }
+        else
+            startFrame = CGRectMake(targetFrame.origin.x, targetFrame.origin.y - shiftOffset, targetFrame.size.width, targetFrame.size.height);
+
+        [view setFrame:startFrame];[animDict setObject:startFrame forKey:CPViewAnimationStartFrameKey];
+        [viewAnimations addObject:animDict];
+    }];
+
+    var disclosureRows = [];
+    [rowIndexes getIndexes:disclosureRows maxCount:-1 inIndexRange:nil];
+    for (var i = 0; i < disclosureRows.length; i++)
+    {
+        var r = disclosureRows[i];
+        var btn = _disclosureControlsForRows[r];
+        if (btn)
+        {
+            var isNewRow = (r < startIndex + addedCount);
+            var targetBtnFrame = [btn frame];
+            var startBtnFrame;
+            var animBtnDict = @{ CPViewAnimationTargetKey: btn, CPViewAnimationEndFrameKey: targetBtnFrame };
+
+            if (isNewRow)
+            {
+                startBtnFrame = CGRectMake(targetBtnFrame.origin.x, parentY, targetBtnFrame.size.width, targetBtnFrame.size.height);[animBtnDict setObject:CPViewAnimationFadeInEffect forKey:CPViewAnimationEffectKey];[btn setAlphaValue:0.0];
+            }
+            else
+                startBtnFrame = CGRectMake(targetBtnFrame.origin.x, targetBtnFrame.origin.y - shiftOffset, targetBtnFrame.size.width, targetBtnFrame.size.height);
+
+            [btn setFrame:startBtnFrame];[animBtnDict setObject:startBtnFrame forKey:CPViewAnimationStartFrameKey];
+            [viewAnimations addObject:animBtnDict];
+        }
+    }
+
+    [self _runAnimation:viewAnimations withGhosts:nil];
+}
+
+- (void)_runAnimation:(CPArray)viewAnimations withGhosts:(CPArray)ghosts
+{
+    // Clean up interrupted animations
+    if (_animationGhosts)
+    {
+        for (var i = 0; i < _animationGhosts.length; i++)
+            [_animationGhosts[i] removeFromSuperview];
+    }
+    _animationGhosts = ghosts;
+
+    if (viewAnimations.length > 0)
+    {
+        _rowsAnimation = [[CPViewAnimation alloc] initWithViewAnimations:viewAnimations];
+        [_rowsAnimation setDuration:0.25];[_rowsAnimation setAnimationCurve:CPAnimationEaseInOut];
+        [_rowsAnimation setDelegate:self];
+        [_rowsAnimation startAnimation];
+    }
+    else if (ghosts)
+    {
+        for (var i = 0; i < ghosts.length; i++)
+            [ghosts[i] removeFromSuperview];
+        _animationGhosts = nil;
+    }
+}
+
+- (void)animationDidEnd:(CPViewAnimation)animation
+{
+    var animations = [animation viewAnimations];
+    
+    for (var i = 0; i < animations.length; i++)
+    {
+        var view = animations[i][CPViewAnimationTargetKey];
+        if (!_animationGhosts || ![_animationGhosts containsObject:view])[view setAlphaValue:1.0]; 
+    }
+
+    if (_animationGhosts)
+    {
+        for (var i = 0; i < _animationGhosts.length; i++)
+            [_animationGhosts[i] removeFromSuperview];
+        _animationGhosts = nil;
+    }
+
+    [self setNeedsLayout];
+}
+
 /*!
     Reloads the data for an item.
 
@@ -786,6 +1132,11 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
 */
 - (void)reloadItem:(id)anItem reloadChildren:(BOOL)shouldReloadChildren
 {
+    if (_rowsAnimation && [_rowsAnimation isAnimating])
+    {
+        [_rowsAnimation stopAnimation];
+        [self animationDidEnd:_rowsAnimation];
+    }
 
     _pendingItemToClean = [];
     _itemAddedDuringLastLoading = [];
@@ -2229,7 +2580,15 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
 
 @implementation CPDisclosureButton : CPButton
 {
-    float _angle;
+    float           _angle;
+
+    // Animation state tracking
+    BOOL            _isAnimatingClone;
+    CPInteger       _animatingRowIndex; 
+    CPOutlineView   _parentOutlineView;
+    
+    DOMElement      _arrowElement;
+    CPString        _lastColorCSS;
 }
 
 - (id)initWithFrame:(CGRect)aFrame
@@ -2237,66 +2596,220 @@ var CPOutlineViewCoalesceSelectionNotificationStateOff  = 0,
     self = [super initWithFrame:aFrame];
 
     if (self)
+    {
         [self setBordered:NO];
-
+        [self setWantsLayer:YES];
+        [self setHighlightsBy:0];
+        
+        [self _setupDisclosureButton];
+    }
     return self;
 }
 
+- (id)initWithCoder:(CPCoder)aCoder
+{
+    self = [super initWithCoder:aCoder];
+
+    if (self)
+    {
+        [self _setupDisclosureButton];
+    }
+    return self;
+}
+
+- (void)_setupDisclosureButton
+{
+    _isAnimatingClone = NO; // Default for real buttons
+
+#if PLATFORM(DOM)
+
+    // Add a dedicated DOM element for the SVG arrow
+    _arrowElement = document.createElement("div");
+    _arrowElement.style.position = "absolute";
+    _arrowElement.style.top = "0px";
+    _arrowElement.style.left = "0px";
+    _arrowElement.style.width = "100%";
+    _arrowElement.style.height = "100%";
+    _arrowElement.style.backgroundPosition = "center center";
+    _arrowElement.style.backgroundRepeat = "no-repeat";
+    // 24px maps the 24x24 viewBox to exact pixels, making the 10x5 path scale perfectly
+    _arrowElement.style.backgroundSize = "24px 24px";
+    _arrowElement.style.pointerEvents = "none";
+    
+    self._DOMElement.appendChild(_arrowElement);
+#endif
+}
+
+- (void)setAngle:(float)anAngle
+{
+    _angle = anAngle;
+    
+    // Rotate the DOM element directly using standard CSS transforms
+    var deg = _angle * (180.0 / Math.PI);
+
+#if PLATFORM(DOM)
+    _arrowElement.style.transform = "rotate(" + deg + "deg)";
+#endif
+
+    [self display];
+}
+
+- (float)angle
+{
+    return _angle;
+}
+
 - (void)setState:(CPInteger)aState
 {
     [super setState:aState];
 
+    // Using setAngle immediately triggers the transform
     if ([self state] === CPOnState)
-        _angle = 0.0;
-
+        [self setAngle:0.0];
     else
-        _angle = -PI_2;
+        [self setAngle:-PI_2];
+}
+
+- (void)stopTracking:(CGPoint)lastPoint at:(CGPoint)point mouseIsUp:(BOOL)mouseIsUp
+{
+    var bounds = [self bounds];
+
+    if (CGRectContainsPoint(bounds, point))
+    {
+        var outlineView = [self superview],
+            row = [outlineView rowForView:self];
+
+        if ([outlineView isKindOfClass:[CPOutlineView class]] && row !== CPNotFound)
+        {
+            // 1. Tell OutlineView to suppress drawing of the real button
+            [outlineView _noteDisclosureAnimationWillStartForRow:row];
+
+            // 2. Create the clone
+            var clone = [[CPDisclosureButton alloc] initWithFrame:[self frame]];
+            
+            [clone setWantsLayer:YES];
+            [clone setThemeState:[self themeState]];
+            [clone unsetThemeState:CPThemeStateHighlighted];
+            [clone setHighlighted:NO];
+            [clone setAngle:_angle];
+            [clone setHitTests:NO];
+            
+            // 3. Mark this as a clone so drawRect knows to draw it
+            clone._isAnimatingClone = YES;
+            clone._animatingRowIndex = row;
+            clone._parentOutlineView = outlineView;[outlineView addSubview:clone positioned:CPWindowAbove relativeTo:self];
+
+            // 4. Calculate angles
+            var isCurrentlyExpanded = ([self state] === CPOnState),
+                targetAngle = isCurrentlyExpanded ? -PI_2 : 0.0;
+
+            // 5. Setup Animation
+            var anim = [CABasicAnimation animationWithKeyPath:@"angle"];
+            [anim setFromValue:_angle];
+            [anim setToValue:targetAngle];
+            [anim setDuration:0.25];
+            [anim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
+
+            [[clone layer] setDelegate:clone];
+            [anim setDelegate:clone];
+            
+            [[clone layer] addAnimation:anim forKey:@"angle"];
+
+            // Set final angle on clone to avoid flicker at end
+            [clone setAngle:targetAngle];
+        }
+    }
+
+    [super stopTracking:lastPoint at:point mouseIsUp:mouseIsUp];
+}
+
+- (void)animationDidStop:(CAAnimation)anim finished:(BOOL)flag
+{
+    // This runs on the CLONE
+    if (_parentOutlineView)
+        [_parentOutlineView _noteDisclosureAnimationDidStopForRow:_animatingRowIndex];
+
+    [self removeFromSuperview];
 }
 
 - (void)drawRect:(CGRect)aRect
 {
-    var bounds = [self bounds],
-        context = [[CPGraphicsContext currentContext] graphicsPort],
-        width = CGRectGetWidth(bounds),
-        height = CGRectGetHeight(bounds);
 
-    CGContextBeginPath(context);
+#if PLATFORM(DOM)
+    if (_arrowElement && _arrowElement.parentNode !== self._DOMElement)
+        self._DOMElement.appendChild(_arrowElement);
+#endif
 
-    if (_angle)
+    // If I am NOT the clone, I must check if my row is animating.
+    // If it is animating, the clone is drawing on top of me, so I should be invisible.
+    if (!_isAnimatingClone)
     {
-        var centre = CGPointMake(FLOOR(width / 2.0), FLOOR(height / 2.0));
-        CGContextTranslateCTM(context, centre.x, centre.y);
-        CGContextRotateCTM(context, _angle);
-        CGContextTranslateCTM(context, -centre.x, -centre.y);
+        var outlineView = [self superview];
+        if ([outlineView isKindOfClass:[CPOutlineView class]])
+        {
+            var row = [outlineView rowForView:self];
+            if (row !== CPNotFound && [outlineView _isRowAnimatingDisclosure:row])
+            {
+
+#if PLATFORM(DOM)
+                _arrowElement.style.display = "none";
+#endif
+                return; // Suppress the real button
+            }
+        }
     }
 
-    // Center, but crisp.
-    CGContextTranslateCTM(context, FLOOR((width - 9.0) / 2.0), FLOOR((height - 8.0) / 2.0));
+        _arrowElement.style.display = "block";
+    
+    var isSelected = [self hasThemeState:CPThemeStateSelected],
+        isHighlighted = [self hasThemeState:CPThemeStateHighlighted],
+        isKeyWindow = [self hasThemeState:CPThemeStateKeyWindow],
+        isHUD = [self window] && ([[self window] styleMask] & CPHUDBackgroundWindowMask), 
+        triangleColor = nil;
 
-    CGContextMoveToPoint(context, 0.0, 0.0);
-    CGContextAddLineToPoint(context, 9.0, 0.0);
-    CGContextAddLineToPoint(context, 4.5, 8.0);
-    CGContextClosePath(context);
+    // Establish the required color based on the state/outline selection
+    if (isHUD)
+    {
+        triangleColor = isSelected ? [CPColor blackColor] : [CPColor whiteColor];
 
-    CGContextSetFillColor(context,
-        colorForDisclosureTriangle([self hasThemeState:CPThemeStateSelected],
-            [self hasThemeState:CPThemeStateHighlighted]));
-    CGContextFillPath(context);
+        if (isHighlighted)
+            triangleColor = [triangleColor colorWithAlphaComponent:0.5];
+    }
+    else
+    {
+        if (isSelected)
+            triangleColor = isKeyWindow ? [CPColor whiteColor] : [CPColor blackColor];
+        else triangleColor = [CPColor colorWithCalibratedWhite:0.45 alpha: 1.0];
 
-    CGContextBeginPath(context);
-    CGContextMoveToPoint(context, 0.0, 0.0);
-    CGContextAddLineToPoint(context, 4.5, 8.0);
+        if (isHighlighted)
+        {
+             if (isSelected && isKeyWindow)
+                triangleColor = [CPColor colorWithCalibratedWhite:0.9 alpha: 1.0];
 
-    if (_angle === 0.0)
-        CGContextAddLineToPoint(context, 9.0, 0.0);
+             else if (isSelected && !isKeyWindow)
+                triangleColor = [CPColor colorWithCalibratedWhite:0.2 alpha: 1.0];
+             else
+                triangleColor = [CPColor colorWithCalibratedWhite:0.25 alpha: 1.0];
+        }
+    }
 
-    CGContextSetStrokeColor(context, [CPColor colorWithCalibratedWhite:1.0 alpha: 0.7]);
-    CGContextStrokePath(context);
+    var colorCSS = [triangleColor cssString];
+    
+    // Convert and inject the updated SVG only when the required color has changed 
+    if (_lastColorCSS !== colorCSS)
+    {
+        _lastColorCSS = colorCSS;
+        var svgString = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10H7Z" fill="' + colorCSS + '"/></svg>';
+        var b64 = window.btoa(svgString);
+
+#if PLATFORM(DOM)
+        _arrowElement.style.backgroundImage = "url('data:image/svg+xml;charset=utf-8;base64," + b64 + "')";
+#endif
+    }
 }
 
 @end
 
-
 var CPOutlineViewIndentationPerLevelKey = @"CPOutlineViewIndentationPerLevelKey",
     CPOutlineViewOutlineTableColumnKey = @"CPOutlineViewOutlineTableColumnKey",
     CPOutlineViewDataSourceKey = @"CPOutlineViewDataSourceKey",
@@ -2330,6 +2843,8 @@ var CPOutlineViewIndentationPerLevelKey = @"CPOutlineViewIndentationPerLevelKey"
         [super setDelegate:self];
 
         [self _updateIsViewBased];
+
+        _animatingDisclosureRows = [CPIndexSet indexSet];
     }
 
     return self;

AppKit/CPPopUpButton.j

@@ -79,6 +79,8 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 
     if (self)
     {
+        [self setBezelStyle:CPRoundedBezelStyle];
+
         [self selectItemAtIndex:CPNotFound];
 
         _preferredEdge = CPMaxYEdge;
@@ -689,6 +691,12 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
     // FIXME: setFont: should set the font on the menu.
     [menu setFont:[self font]];
 
+    // Propagate the HUD theme state to the menu
+    if ([self hasThemeState:CPThemeStateHUD])
+        [menu setThemeState:CPThemeStateHUD];
+    else
+        [menu unsetThemeState:CPThemeStateHUD];
+
     if ([self pullsDown])
     {
         var positionedItem = nil,

AppKit/CPProgressIndicator.j

@@ -43,7 +43,6 @@ CPProgressIndicatorSpinningStyle = 1;
 */
 CPProgressIndicatorHUDBarStyle = 2;
 
-var CPProgressIndicatorSpinningStyleColors = [];
 
 /*!
     @ingroup appkit
@@ -71,6 +70,43 @@ var CPProgressIndicatorSpinningStyleColors = [];
     BOOL                        _isDisplayedWhenStopped;
 }
 
+// Inject CSS Keyframes for spinning animation (Standard + WebKit)
+
++ (void)initialize
+{
+    if (self !== [CPProgressIndicator class])
+        return;
+
+#if PLATFORM(DOM)
+
+    if (document.getElementById("cp-progress-indicator-style"))
+        return;
+
+    var style = document.createElement("style");
+    style.id = "cp-progress-indicator-style";
+    style.type = "text/css";
+    
+    // We define two animations:
+    // 1. cp-progress-indicator-spin: Rotates 360 degrees (for spinners)
+    // 2. cp-progress-indicator-bar-slide: Moves background-position (for striped bars)
+    var css = 
+        "@keyframes cp-progress-indicator-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } " +
+        "@-webkit-keyframes cp-progress-indicator-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } " +
+        
+        "@keyframes cp-progress-indicator-bar-slide { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } } " +
+        "@-webkit-keyframes cp-progress-indicator-bar-slide { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } }";
+    
+    if (style.styleSheet)
+        style.styleSheet.cssText = css;
+    else
+        style.appendChild(document.createTextNode(css));
+        
+    var head = document.getElementsByTagName("head")[0];
+    if (head) 
+        head.appendChild(style);
+#endif
+}
+
 + (CPString)defaultThemeClass
 {
     return @"progress-indicator";
@@ -83,12 +119,19 @@ var CPProgressIndicatorSpinningStyleColors = [];
             @"bar-color": [CPNull null],
             @"default-height": 20,
             @"bezel-color": [CPNull null],
-            @"spinning-mini-gif": [CPNull null],
-            @"spinning-small-gif": [CPNull null],
-            @"spinning-regular-gif": [CPNull null],
+            
+            // CSS Spinner Attributes
+            @"spinner-color": [CPColor grayColor],
+            @"spinner-track-color": [CPColor colorWithWhite:0.9 alpha:1.0],
+            @"spinner-line-width": 3.0,
+
             @"circular-border-color": [CPNull null],
             @"circular-border-size": 1,
-            @"circular-color": [CPNull null]
+            @"circular-color": [CPNull null],
+
+            @"spinning-mini-gif": [CPNull null],
+            @"spinning-small-gif": [CPNull null],
+            @"spinning-regular-gif": [CPNull null]
         };
 }
 
@@ -138,6 +181,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
     _isAnimating = YES;
 
     [self _hideOrDisplay];
+    [self setNeedsLayout]; // Trigger layout to update CSS animation state
 }
 
 /*!
@@ -149,6 +193,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
     _isAnimating = NO;
 
     [self _hideOrDisplay];
+    [self setNeedsLayout]; // Trigger layout to remove CSS animation state
 }
 
 /*!
@@ -233,7 +278,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
     _controlSize = aControlSize;
 
-    [self updateBackgroundColor];
+    [self setNeedsLayout];
 }
 
 /*!
@@ -285,7 +330,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
     _indeterminate = indeterminate;
 
-    [self updateBackgroundColor];
+    [self setNeedsLayout];
 }
 
 /*!
@@ -307,9 +352,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
     _style = aStyle;
 
-    [self setTheme:(_style === CPProgressIndicatorHUDBarStyle) ? [CPTheme defaultHudTheme] : [CPTheme defaultTheme]];
-
-    [self updateBackgroundColor];
+    [self setNeedsLayout];
 }
 
 /*!
@@ -318,7 +361,14 @@ var CPProgressIndicatorSpinningStyleColors = [];
 - (void)sizeToFit
 {
     if (_style == CPProgressIndicatorSpinningStyle)
-        [self setFrameSize:[[CPProgressIndicatorSpinningStyleColors[_controlSize] patternImage] size]];
+    {
+        var size = 32.0;
+        if (_controlSize === CPMiniControlSize) size = 16.0;
+        else if (_controlSize === CPSmallControlSize) size = 24.0;
+        else if (_controlSize === CPRegularControlSize) size = 32.0;
+        
+        [self setFrameSize:CGSizeMake(size, size)];
+    }
     else
         [self setFrameSize:CGSizeMake(CGRectGetWidth([self frame]), [self valueForThemeAttribute:@"default-height"])];
 }
@@ -381,6 +431,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
 - (CGRect)rectForEphemeralSubviewNamed:(CPString)aViewName
 {
+    // Handle the standard Bar View
     if (aViewName === @"bar-view" && _style !== CPProgressIndicatorSpinningStyle)
     {
         var width = CGRectGetWidth([self bounds]),
@@ -394,41 +445,78 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
         return CGRectMake(0, 0, barWidth, [self valueForThemeAttribute:@"default-height"]);
     }
-
-    return nil;
-}
-
-/* @ignore */
-- (void)updateBackgroundColor
-{
-    if ([CPProgressIndicatorSpinningStyleColors count] === 0)
+    
+    // Handle the Spinning View (CSS Spinner)
+    if (aViewName === @"spinner-view" && _style == CPProgressIndicatorSpinningStyle && _indeterminate)
     {
-        CPProgressIndicatorSpinningStyleColors[CPMiniControlSize] = [self valueForThemeAttribute:@"spinning-mini-gif"];
-        CPProgressIndicatorSpinningStyleColors[CPSmallControlSize] = [self valueForThemeAttribute:@"spinning-small-gif"];
-        CPProgressIndicatorSpinningStyleColors[CPRegularControlSize] = [self valueForThemeAttribute:@"spinning-regular-gif"];
+        return [self bounds];
     }
 
-    [self setNeedsLayout];
+    // Return nil for views that shouldn't appear in the current style
+    return nil;
 }
 
 - (void)layoutSubviews
 {
     if (YES)//_isBezeled)
     {
+        // === SPINNING STYLE ===
         if (_style == CPProgressIndicatorSpinningStyle)
         {
-            if (!_indeterminate)
-                return;
+            // If indeterminate, use CSS spinner
+            if (_indeterminate)
+            {
+                var spinnerView = [self layoutEphemeralSubviewNamed:"spinner-view"
+                                                         positioned:CPWindowAbove
+                                    relativeToEphemeralSubviewNamed:nil];
+                                    
+                // Ensure other views are hidden
+                [self layoutEphemeralSubviewNamed:"bar-view" positioned:CPWindowBelow relativeToEphemeralSubviewNamed:nil];
 
-            // This will cause the bar view to go away due to having a nil rect when _style == CPProgressIndicatorSpinningStyle.
-            [self layoutEphemeralSubviewNamed:"bar-view"
-                                   positioned:CPWindowBelow
-              relativeToEphemeralSubviewNamed:nil];
+                // Configure CSS on the subview, NOT self._DOMElement, to avoid transform conflicts
+                var domEl = spinnerView._DOMElement,
+                    spinnerColor = [self currentValueForThemeAttribute:@"spinner-color"],
+                    trackColor = [self currentValueForThemeAttribute:@"spinner-track-color"],
+                    lineWidth = [self currentValueForThemeAttribute:@"spinner-line-width"],
+                    widthStr = lineWidth + "px";
 
-            [self setBackgroundColor:CPProgressIndicatorSpinningStyleColors[_controlSize]];
+                domEl.style.boxSizing = "border-box";
+                domEl.style.borderRadius = "50%";
+                domEl.style.borderStyle = "solid";
+                domEl.style.borderWidth = widthStr;
+                domEl.style.borderColor = [trackColor cssString];
+                domEl.style.borderTopColor = [spinnerColor cssString];
+                
+                // Animation logic
+                if (_isAnimating)
+                {
+                    var anim = "cp-progress-indicator-spin 1s linear infinite";
+                    domEl.style.animation = anim;
+                    domEl.style.WebkitAnimation = anim;
+                }
+                else
+                {
+                    domEl.style.animation = "none";
+                    domEl.style.WebkitAnimation = "none";
+                }
+                
+                // Ensure main view is transparent
+                [self setBackgroundColor:nil];
+            }
+            else
+            {
+                // Determinate Spinner (Pie Chart drawn in drawRect)
+                // Hide CSS spinner
+                [self layoutEphemeralSubviewNamed:"spinner-view" positioned:CPWindowBelow relativeToEphemeralSubviewNamed:nil];
+                [self setBackgroundColor:nil];
+            }
         }
+        // === BAR STYLE ===
         else
         {
+           // Hide spinner
+           [self layoutEphemeralSubviewNamed:"spinner-view" positioned:CPWindowBelow relativeToEphemeralSubviewNamed:nil];
+           
            [self setBackgroundColor:[self currentValueForThemeAttribute:@"bezel-color"]];
 
            var barView = [self layoutEphemeralSubviewNamed:"bar-view"
@@ -447,6 +535,8 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
 - (void)drawRect:(CGRect)aRect
 {
+    // Handle determinate state for Spinning style (Pie chart progress) via CoreGraphics.
+    // If indeterminate, the CSS animation (spinner-view) takes over and we draw nothing.
     if (_style == CPProgressIndicatorSpinningStyle && !_indeterminate)
     {
         var context = [[CPGraphicsContext currentContext] graphicsPort],
@@ -512,7 +602,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
         _isDisplayedWhenStoppedSet  = [aCoder decodeObjectForKey:@"_isDisplayedWhenStoppedSet"];
         _isDisplayedWhenStopped     = [aCoder decodeObjectForKey:@"_isDisplayedWhenStopped"];
 
-        [self updateBackgroundColor];
+        [self setNeedsLayout];
     }
 
     return self;
@@ -520,8 +610,6 @@ var CPProgressIndicatorSpinningStyleColors = [];
 
 - (void)encodeWithCoder:(CPCoder)aCoder
 {
-    // Don't encode the background colour. It can be recreated based on the flags
-    // and if encoded causes hardcoded image paths in the cib while just wasting space.
     var backgroundColor = [self backgroundColor];
     [self setBackgroundColor:nil];
     [super encodeWithCoder:aCoder];

AppKit/CPRuleEditor/CPRuleEditor.j

@@ -1957,57 +1957,63 @@ TODO: implement
 
 - (CPArray)_backgroundColors
 {
-    return [self valueForThemeAttribute:@"alternating-row-colors"];
+    return [self currentValueForThemeAttribute:@"alternating-row-colors"];
 }
 
 - (CPColor)_selectedRowColor
 {
-    return [self valueForThemeAttribute:@"selected-color"];
+    return [self currentValueForThemeAttribute:@"selected-color"];
 }
 
 - (CPColor)_sliceTopBorderColor
 {
-    return [self valueForThemeAttribute:@"slice-top-border-color"];
+    return [self currentValueForThemeAttribute:@"slice-top-border-color"];
 }
 
 - (CPColor)_sliceBottomBorderColor
 {
-    return [self valueForThemeAttribute:@"slice-bottom-border-color"];
+    return [self currentValueForThemeAttribute:@"slice-bottom-border-color"];
 }
 
 - (CPColor)_sliceLastBottomBorderColor
 {
-    return [self valueForThemeAttribute:@"slice-last-bottom-border-color"];
+    return [self currentValueForThemeAttribute:@"slice-last-bottom-border-color"];
 }
 
 - (CPFont)font
 {
-    return [self valueForThemeAttribute:@"font"];
+    return [self currentValueForThemeAttribute:@"font"];
 }
 
 - (CPColor)_fontColor
 {
-    return [self valueForThemeAttribute:@"font-color"];
+    return [self currentValueForThemeAttribute:@"font-color"];
+}
+
+- (void)setThemeState:(CPThemeState)aState
+{
+    [super setThemeState:aState];
+    [_slices makeObjectsPerformSelector:@selector(setThemeState:) withObject:aState];
 }
 
 - (CPImage)_imageAdd
 {
-    return [self valueForThemeAttribute:@"add-image" inState:CPThemeStateNormal];
+    return [self valueForThemeAttribute:@"add-image" inState:CPThemeStateNormal.and([self themeState])];
 }
 
 - (CPImage)_imageAddHighlighted
 {
-    return [self valueForThemeAttribute:@"add-image" inState:CPThemeStateHighlighted];
+    return [self valueForThemeAttribute:@"add-image" inState:CPThemeStateHighlighted.and([self themeState])];
 }
 
 - (CPImage)_imageRemove
 {
-    return [self valueForThemeAttribute:@"remove-image" inState:CPThemeStateNormal];
+    return [self valueForThemeAttribute:@"remove-image" inState:CPThemeStateNormal.and([self themeState])];
 }
 
 - (CPImage)_imageRemoveHighlighted
 {
-    return [self valueForThemeAttribute:@"remove-image" inState:CPThemeStateHighlighted];
+    return [self valueForThemeAttribute:@"remove-image" inState:CPThemeStateHighlighted.and([self themeState])];
 }
 
 - (CPVerticalTextAlignment)_verticalAlignment
@@ -2219,7 +2225,13 @@ TODO: implement
         return;
 
     var point = [self convertPoint:[event locationInWindow] fromView:nil],
-        view = [_slices objectAtIndex:FLOOR(MAX(0, point.y) / _sliceHeight)];
+        index = FLOOR(MAX(0, point.y) / _sliceHeight);
+
+    // Check bounds before accessing the array to prevent CPRangeException
+    if (index >= [_slices count])
+        return;
+
+    var view = [_slices objectAtIndex:FLOOR(MAX(0, point.y) / _sliceHeight)];
 
     if ([self _dragShouldBeginFromMouseDown:view])
         [self _performDragForSlice:view withEvent:event];

AppKit/CPRuleEditor/_CPRuleEditorViewSlice.j

@@ -49,6 +49,13 @@
     return self;
 }
 
+- (void)setRowIndex:(int)anIndex
+{
+    _rowIndex = anIndex;
+    [self _updateBackgroundColor];
+    [self setNeedsDisplay:YES];
+}
+
 - (void)_setSelected:(BOOL)select
 {
     if (select == _selected)
@@ -57,6 +64,47 @@
     var selector = select ? @selector(setThemeState:) : @selector(unsetThemeState:);
     [[self subviews] makeObjectsPerformSelector:selector  withObject:CPThemeStateSelectedDataView];
     _selected = select;
+    
+    [self _updateBackgroundColor];
+    [self setNeedsDisplay:YES];
+}
+
+- (void)_updateBackgroundColor
+{
+    var color = nil;
+
+    if ([self _isSelected])
+    {
+        color = [_ruleEditor _selectedRowColor];
+    }
+    else
+    {
+        var colors = [_ruleEditor _backgroundColors],
+            count = [colors count];
+        
+        if (count > 0)
+            color = [colors objectAtIndex:(_rowIndex % count)];
+    }
+
+    [self setBackgroundColor:color];
+}
+
+- (void)viewDidMoveToWindow
+{
+    [super viewDidMoveToWindow];
+    [self _updateBackgroundColor];
+}
+
+- (void)setThemeState:(CPThemeState)aState
+{
+    [super setThemeState:aState];
+    [self _updateBackgroundColor];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    [super unsetThemeState:aState];
+    [self _updateBackgroundColor];
 }
 
 - (void)drawRect:(CGRect)rect
@@ -66,35 +114,31 @@
         maxX    = CGRectGetWidth(bounds),
         maxY    = CGRectGetHeight(bounds);
 
-    // Draw background
-    if ([self _isSelected])
-        _backgroundColor = [_ruleEditor _selectedRowColor];
-    else
-    {
-        var colors = [_ruleEditor _backgroundColors],
-            count = [colors count];
-        _backgroundColor = [colors objectAtIndex:(_rowIndex % count)];
-    }
-
-    CGContextSetFillColor(context, _backgroundColor);
-    CGContextFillRect(context, rect);
+    // Note: Background is now handled by setBackgroundColor in _updateBackgroundColor
+    // to support CSS-based colors and transparency correctly.
 
     // Draw Top Border
-    CGContextBeginPath(context);
-    CGContextMoveToPoint(context, 0, 0);
-    CGContextAddLineToPoint(context, maxX, 0);
-    CGContextSetStrokeColor(context, [_ruleEditor _sliceTopBorderColor]);
-    CGContextStrokePath(context);
+    var topColor = [_ruleEditor _sliceTopBorderColor];
+    if (topColor)
+    {
+        CGContextBeginPath(context);
+        CGContextMoveToPoint(context, 0, 0);
+        CGContextAddLineToPoint(context, maxX, 0);
+        CGContextSetStrokeColor(context, topColor);
+        CGContextStrokePath(context);
+    }
 
     // Draw Bottom Border
-    CGContextBeginPath(context);
-    CGContextMoveToPoint(context, 0, maxY);
-    CGContextAddLineToPoint(context, maxX, maxY);
-
     var bottomColor = (_rowIndex == [_ruleEditor _lastRow]) ? [_ruleEditor _sliceLastBottomBorderColor] : [_ruleEditor _sliceBottomBorderColor];
 
-    CGContextSetStrokeColor(context, bottomColor);
-    CGContextStrokePath(context);
+    if (bottomColor)
+    {
+        CGContextBeginPath(context);
+        CGContextMoveToPoint(context, 0, maxY);
+        CGContextAddLineToPoint(context, maxX, maxY);
+        CGContextSetStrokeColor(context, bottomColor);
+        CGContextStrokePath(context);
+    }
 }
 
 - (void)mouseDown:(CPEvent)theEvent

AppKit/CPRuleEditor/_CPRuleEditorViewSliceRow.j

@@ -67,6 +67,23 @@
     [self setAutoresizingMask:CPViewWidthSizable];
 }
 
+- (void)_setSelected:(BOOL)isSelected
+{
+    [super _setSelected:isSelected];
+    [self _updateButtonImages];
+}
+
+- (void)_updateButtonImages
+{
+    var rowState = [self themeState];
+
+    if ([self _isSelected])
+        rowState = rowState.and(CPThemeStateSelected);
+
+    [_addButton setImage:[_ruleEditor valueForThemeAttribute:@"add-image" inState:rowState]];
+    [_subtractButton setImage:[_ruleEditor valueForThemeAttribute:@"remove-image" inState:rowState]];
+}
+
 - (CPButton)_createRowButton
 {
     var button = [[CPButton alloc] initWithFrame:CGRectMakeZero()];
@@ -89,6 +106,8 @@
     var button = [self _createRowButton];
 
     [button setToolTip:[_ruleEditor _toolTipForAddSimpleRowButton]];
+    
+    // Initial setup, _updateButtonImages will be called later to set correct state-based images
     [button setValue:[_ruleEditor _imageAdd] forThemeAttribute:@"image" inState:CPThemeStateNormal];
     [button setValue:[_ruleEditor _imageAddHighlighted] forThemeAttribute:@"image" inState:CPThemeStateHighlighted];
 
@@ -103,6 +122,8 @@
     var button = [self _createRowButton];
 
     [button setToolTip:[_ruleEditor _toolTipForDeleteRowButton]];
+    
+    // Initial setup
     [button setValue:[_ruleEditor _imageRemove] forThemeAttribute:@"image" inState:CPThemeStateNormal];
     [button setValue:[_ruleEditor _imageRemoveHighlighted] forThemeAttribute:@"image" inState:CPThemeStateHighlighted];
 
@@ -525,9 +546,23 @@
 
 - (void)viewDidMoveToWindow
 {
+    [super viewDidMoveToWindow];
+    [self _updateButtonImages];
     [self layoutSubviews];
 }
 
+- (void)setThemeState:(CPThemeState)aState
+{
+    [super setThemeState:aState];
+    [self _updateButtonImages];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    [super unsetThemeState:aState];
+    [self _updateButtonImages];
+}
+
 - (void)_addObservers
 {
     if (_isObserving)

AppKit/CPScrollView.j

@@ -103,6 +103,12 @@ var CPScrollViewWillStartLiveScrollNotification = @"CPScrollViewWillStartLiveScr
 var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
     CPScrollerStyleGlobalChangeNotification     = @"CPScrollerStyleGlobalChangeNotification";
 
+var CPScrollViewBorderSuffixes = @[@"no-border", @"line-border", @"bezel-border", @"groove-border"];
+
+// _CPScrollViews will hold all created CPScrollView's in order to propagate changes
+// of scroller global style
+var _CPScrollViews;
+
 /*!
     @ingroup appkit
     @class CPScrollView
@@ -167,6 +173,8 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
         CPScrollerStyleGlobal = _isBrowserUsingOverlayScrollers() ? CPScrollerStyleOverlay : CPScrollerStyleLegacy
     else
         CPScrollerStyleGlobal = globalValue;
+
+    _CPScrollViews = @[];
 }
 
 + (CPString)defaultThemeClass
@@ -178,7 +186,15 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
 {
     return @{
             @"bottom-corner-color": [CPColor whiteColor],
-            @"border-color": [CPColor blackColor]
+            @"border-color": [CPColor blackColor],
+            @"content-inset-no-border":     CGInsetMake(0, 0, 0, 0),
+            @"content-inset-line-border":   CGInsetMake(1, 1, 1, 1),
+            @"content-inset-bezel-border":  CGInsetMake(1, 1, 1, 1),
+            @"content-inset-groove-border": CGInsetMake(2, 2, 2, 2),
+            @"background-color-no-border":     [CPNull null],
+            @"background-color-line-border":   [CPNull null],
+            @"background-color-bezel-border":  [CPNull null],
+            @"background-color-groove-border": [CPNull null]
         };
 }
 
@@ -247,19 +263,35 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
 
 + (CGRect)_insetBounds:(CGRect)bounds borderType:(CPBorderType)borderType
 {
+    // First, we have to check if we are compiling a theme or running an application because if working on a theme,
+    // we can't use theme attributes to determine the inset ! This would be a kind of circular reference...
+
+    var compilingATheme = [[[CPBundle mainBundle] objectForInfoDictionaryKey:@"CPApplicationDelegateClass"] isEqualToString:@"BKShowcaseController"];
+
+    if (compilingATheme)
+        return bounds;
+
+    var contentInset = [[CPTheme defaultTheme] valueForAttributeWithName:@"content-inset-"+CPScrollViewBorderSuffixes[borderType] forClass:CPScrollView];
+
+    // As this is a class method, we don't have object attributes, so if the theme doesn't declare content insets, we don't automatically get default value.
+    // Get it by hand.
+    if (!contentInset)
+        contentInset = [[self themeAttributes] objectForKey:@"content-inset-"+CPScrollViewBorderSuffixes[borderType]];
+
     switch (borderType)
     {
+        case CPNoBorder:
         case CPLineBorder:
         case CPBezelBorder:
-            return CGRectInset(bounds, 1.0, 1.0);
+            return CGRectInsetByInset(bounds, contentInset);
 
         case CPGrooveBorder:
-            bounds = CGRectInset(bounds, 2.0, 2.0);
+            // FIXME: Do something better with this
+            bounds = CGRectInsetByInset(bounds, contentInset);
             ++bounds.origin.y;
             --bounds.size.height;
             return bounds;
 
-        case CPNoBorder:
         default:
             return bounds;
     }
@@ -281,7 +313,10 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
 + (void)setGlobalScrollerStyle:(CPScrollerStyle)aStyle
 {
     CPScrollerStyleGlobal = aStyle;
-    [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollerStyleGlobalChangeNotification object:nil];
+
+    // We propagate the new scroller global style to all existing CPScrollView's
+    for (var i = 0, count = [_CPScrollViews count]; i < count; i++)
+        [_CPScrollViews[i] setScrollerStyle:CPScrollerStyleGlobal];
 }
 
 
@@ -323,6 +358,8 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
         _delegate = nil;
         _scrollTimer = nil;
         _implementedDelegateMethods = 0;
+
+        [_CPScrollViews addObject:self];
     }
 
     return self;
@@ -1416,7 +1453,9 @@ Notifies the delegate when the scroll view has finished scrolling.
 
     if (_scrollerStyle === CPScrollerStyleLegacy)
     {
-        [[self bottomCornerView] setFrame:[self _bottomCornerViewFrame]];
+        var bottomCornerFrame = [self _bottomCornerViewFrame];
+        [[self bottomCornerView] setFrame:bottomCornerFrame];
+        [[self bottomCornerView] setHidden:CGRectIsEmpty(bottomCornerFrame)];
         [[self bottomCornerView] setBackgroundColor:[self currentValueForThemeAttribute:@"bottom-corner-color"]];
     }
 
@@ -1494,7 +1533,6 @@ Notifies the delegate when the scroll view has finished scrolling.
 // MARK: -
 // MARK: Overrides
 
-
 - (void)_removeObservers
 {
     if (!_isObserving)
@@ -1512,9 +1550,6 @@ Notifies the delegate when the scroll view has finished scrolling.
     if (_isObserving)
         return;
 
-    //Make sure to have the last global style for the scroller
-    [self _didReceiveDefaultStyleChange:nil];
-
     [[CPNotificationCenter defaultCenter] addObserver:self
                                              selector:@selector(_didReceiveDefaultStyleChange:)
                                                  name:CPScrollerStyleGlobalChangeNotification
@@ -1523,13 +1558,11 @@ Notifies the delegate when the scroll view has finished scrolling.
     [super _addObservers];
 }
 
-
-
 - (void)drawRect:(CGRect)aRect
 {
     [super drawRect:aRect];
 
-    if (_borderType == CPNoBorder)
+    if ([self isCSSBased] || (_borderType == CPNoBorder))
         return;
 
     var strokeRect = [self bounds],
@@ -1734,6 +1767,37 @@ Notifies the delegate when the scroll view has finished scrolling.
 
 // MARK: -
 
+@implementation CPScrollView (CSSTheming)
+
+- (void)layoutSubviews
+{
+    if (![self isCSSBased])
+        return;
+
+    if (_borderType !== CPNoBorder)
+        [self setBackgroundColor:[self currentValueForThemeAttribute:@"background-color-"+CPScrollViewBorderSuffixes[_borderType]]];
+
+    if (_scrollerStyle === CPScrollerStyleLegacy)
+        [[self bottomCornerView] setBackgroundColor:[self currentValueForThemeAttribute:@"bottom-corner-color"]];
+}
+
+- (BOOL)isCSSBased
+{
+    return [[self theme] isCSSBased];
+}
+
+- (void)refreshDisplay
+{
+    if ([self isCSSBased])
+        [self setNeedsLayout:YES];
+    else
+        [self setNeedsDisplay:YES];
+}
+
+@end
+
+#pragma mark -
+
 @implementation CPScrollView (FirstResponder)
 
 // Those 4 next methods are needed to (un)set CPThemeStateFirstResponder based on content view
@@ -1850,10 +1914,7 @@ var CPScrollViewContentViewKey          = @"CPScrollViewContentView",
         _scrollerStyle = [aCoder decodeObjectForKey:CPScrollViewScrollerStyleKey] || CPScrollerStyleGlobal;
         _scrollerKnobStyle = [aCoder decodeObjectForKey:CPScrollViewScrollerKnobStyleKey] || CPScrollerKnobStyleDefault;
 
-        [[CPNotificationCenter defaultCenter] addObserver:self
-                                                 selector:@selector(_didReceiveDefaultStyleChange:)
-                                                     name:CPScrollerStyleGlobalChangeNotification
-                                                   object:nil];
+        [_CPScrollViews addObject:self];
     }
 
     return self;

AppKit/CPScroller.j

@@ -320,7 +320,25 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
     if (![self hasThemeState:CPThemeStateSelected] && ![self hasThemeState:CPThemeStateScrollViewLegacy])
         return CPScrollerNoPart;
 
-    if (CGRectContainsPoint([self rectForPart:CPScrollerKnob], aPoint))
+    // Fetch the visual rect for the knob
+    var bounds = [self bounds],
+        knobRect = [self rectForPart:CPScrollerKnob],
+        hitKnobRect = CGRectMake(CGRectGetMinX(knobRect), CGRectGetMinY(knobRect), CGRectGetWidth(knobRect), CGRectGetHeight(knobRect));
+
+    // Expand the hit test rect to span the entire track on the minor axis 
+    // so dragging works smoothly even if the user clicks slightly off-center.
+    if ([self isVertical])
+    {
+        hitKnobRect.origin.x = 0;
+        hitKnobRect.size.width = CGRectGetWidth(bounds);
+    }
+    else
+    {
+        hitKnobRect.origin.y = 0;
+        hitKnobRect.size.height = CGRectGetHeight(bounds);
+    }
+
+    if (CGRectContainsPoint(hitKnobRect, aPoint))
         return CPScrollerKnob;
 
     if (CGRectContainsPoint([self rectForPart:CPScrollerDecrementPage], aPoint))

AppKit/CPSearchField.j

@@ -104,6 +104,8 @@ var CPAutosavedRecentsChangedNotification = @"CPAutosavedRecentsChangedNotificat
         _sendsWholeSearchString = NO;
         _sendsSearchStringImmediately = NO;
         _recentsAutosaveName = nil;
+        
+        [self setPlaceholderString:@"Search"];
 
         [self _init];
     }
@@ -122,8 +124,13 @@ var CPAutosavedRecentsChangedNotification = @"CPAutosavedRecentsChangedNotificat
     [self setContinuous:YES];
 
     var bounds = [self bounds],
-        cancelButton = [[CPButton alloc] initWithFrame:[self cancelButtonRectForBounds:bounds]],
-        searchButton = [[CPButton alloc] initWithFrame:[self searchButtonRectForBounds:bounds]];
+        cancelButton = nil,
+        searchButton = nil;
+    
+#if PLATFORM(DOM)
+    cancelButton = [[CPButton alloc] initWithFrame:[self cancelButtonRectForBounds:bounds]];
+    searchButton = [[CPButton alloc] initWithFrame:[self searchButtonRectForBounds:bounds]];
+#endif
 
     [self setCancelButton:cancelButton];
     [self resetCancelButton];

AppKit/CPSegmentedControl.j

@@ -71,7 +71,7 @@ CPSegmentSwitchTrackingMomentary = 2;
             @"right-segment-bezel-color": [CPNull null],
             @"center-segment-bezel-color": [CPNull null],
             @"divider-bezel-color": [CPNull null],
-            @"divider-thickness": 1.0,
+            @"divider-thickness": 1.0
         };
 }
 
@@ -316,7 +316,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 // Working with Individual Segments
 /*!
     Sets the width of the specified segment.
-    @param aWidth the new width for the segment
+    @param aWidth the new width for the segment (0 for automatic width)
     @param aSegment the segment to set the width for
     @throws CPRangeException if \c aSegment is out of bounds
 */
@@ -420,7 +420,14 @@ CPSegmentSwitchTrackingMomentary = 2;
 
     [segment setSelected:isSelected];
 
-    _themeStates[aSegment] = isSelected ? CPThemeStateSelected : CPThemeStateNormal;
+    if (_themeStates[aSegment] == undefined)
+        _themeStates[aSegment] = CPThemeStateNormal;
+
+    // Update state using .and() / .without() to preserve existing states (like Disabled)
+    if (isSelected)
+        _themeStates[aSegment] = _themeStates[aSegment].and(CPThemeStateSelected);
+    else
+        _themeStates[aSegment] = _themeStates[aSegment].without(CPThemeStateSelected);
 
     // We need to do some cleanup if we only allow one selection.
     if (isSelected)
@@ -432,7 +439,10 @@ CPSegmentSwitchTrackingMomentary = 2;
         if (_trackingMode == CPSegmentSwitchTrackingSelectOne && oldSelectedSegment != aSegment && oldSelectedSegment != -1 && oldSelectedSegment < _segments.length)
         {
             [_segments[oldSelectedSegment] setSelected:NO];
-            _themeStates[oldSelectedSegment] = CPThemeStateNormal;
+            
+            // Update old segment using .without() to preserve other states
+            // Previously: _themeStates[oldSelectedSegment] = CPThemeStateNormal;
+            _themeStates[oldSelectedSegment] = _themeStates[oldSelectedSegment].without(CPThemeStateSelected);
 
             [self drawSegmentBezel:oldSelectedSegment highlight:NO];
         }
@@ -530,12 +540,24 @@ CPSegmentSwitchTrackingMomentary = 2;
 
 - (float)_leftOffsetForSegment:(unsigned)segment
 {
-    if (segment == 0)
-        return [self currentValueForThemeAttribute:@"bezel-inset"].left;
+    if ([[self actualTheme] isCSSBased])
+    {
+        // CSS styling
+        if (segment == 0)
+            return 0;
 
-    var thickness = [self currentValueForThemeAttribute:@"divider-thickness"];
+        return [self _leftOffsetForSegment:segment - 1] + CGRectGetWidth([self frameForSegment:segment - 1]) - 2; // FIXME: -2 for collapse of borders
+    }
+    else
+    {
+        // Legacy styling
+        if (segment == 0)
+            return [self currentValueForThemeAttribute:@"bezel-inset"].left;
 
-    return [self _leftOffsetForSegment:segment - 1] + CGRectGetWidth([self frameForSegment:segment - 1]) + thickness;
+        var thickness = [self currentValueForThemeAttribute:@"divider-thickness"];
+
+        return [self _leftOffsetForSegment:segment - 1] + CGRectGetWidth([self frameForSegment:segment - 1]) + thickness;
+    }
 }
 
 - (unsigned)_indexOfLastSegment
@@ -569,19 +591,28 @@ CPSegmentSwitchTrackingMomentary = 2;
     }
     else if (aName.indexOf("segment-bezel") === 0)
     {
-        var segment = parseInt(aName.substring("segment-bezel-".length), 10),
+        if ([[self actualTheme] isCSSBased])
+        {
+            var segment = parseInt(aName.substring("segment-bezel-".length), 10);
+
+            return [self bezelFrameForSegment:segment];
+        }
+        else
+        {
+            var segment = parseInt(aName.substring("segment-bezel-".length), 10),
             frame = CGRectCreateCopy([self frameForSegment:segment]);
 
-        if (segment === 0)
-        {
-            frame.origin.x += contentInset.left;
-            frame.size.width -= contentInset.left;
+            if (segment === 0)
+            {
+                frame.origin.x += contentInset.left;
+                frame.size.width -= contentInset.left;
+            }
+
+            if (segment === [self segmentCount] - 1)
+                frame.size.width = CGRectGetWidth([self bounds]) - contentInset.right - frame.origin.x;
+
+            return frame;
         }
-
-        if (segment === [self segmentCount] - 1)
-            frame.size.width = CGRectGetWidth([self bounds]) - contentInset.right - frame.origin.x;
-
-        return frame;
     }
     else if (aName.indexOf("divider-bezel") === 0)
     {
@@ -620,48 +651,85 @@ CPSegmentSwitchTrackingMomentary = 2;
     if ([self segmentCount] <= 0)
         return;
 
-    var themeState = _themeStates[0],
-        isDisabled = [self hasThemeState:CPThemeStateDisabled],
-        isControlSizeSmall = [self hasThemeState:CPThemeStateControlSizeSmall],
-        isControlSizeMini = [self hasThemeState:CPThemeStateControlSizeMini];
+    // Check for HUD state globally
+    var isHUD = [self hasThemeState:CPThemeStateHUD];
 
-    themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
-
-    if (isControlSizeSmall)
-        themeState = themeState.and(CPThemeStateControlSizeSmall);
-    else if (isControlSizeMini)
-        themeState = themeState.and(CPThemeStateControlSizeMini);
-
-    var leftCapColor = [self valueForThemeAttribute:@"left-segment-bezel-color"
-                                            inState:themeState],
-
-        leftBezelView = [self layoutEphemeralSubviewNamed:@"left-segment-bezel"
-                                               positioned:CPWindowBelow
-                          relativeToEphemeralSubviewNamed:nil];
-
-    [leftBezelView setBackgroundColor:leftCapColor];
-
-    var themeState = _themeStates[_themeStates.length - 1];
-
-    themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
-
-    if (isControlSizeSmall)
-        themeState = themeState.and(CPThemeStateControlSizeSmall);
-    else if (isControlSizeMini)
-        themeState = themeState.and(CPThemeStateControlSizeMini);
-
-    var rightCapColor = [self valueForThemeAttribute:@"right-segment-bezel-color"
-                                             inState:themeState],
-
-        rightBezelView = [self layoutEphemeralSubviewNamed:@"right-segment-bezel"
-                                               positioned:CPWindowBelow
-                          relativeToEphemeralSubviewNamed:nil];
-
-    [rightBezelView setBackgroundColor:rightCapColor];
-
-    for (var i = 0, count = _themeStates.length; i < count; i++)
+    if ([[self actualTheme] isCSSBased])
     {
-        var themeState = _themeStates[i];
+        // CSS Styling
+
+        var isDisabled         = [self hasThemeState:CPThemeStateDisabled],
+            isControlSizeSmall = [self hasThemeState:CPThemeStateControlSizeSmall],
+            isControlSizeMini  = [self hasThemeState:CPThemeStateControlSizeMini],
+            isKeyWindow        = [self hasThemeState:CPThemeStateKeyWindow];
+
+        for (var i = 0, count = _themeStates.length; i < count; i++)
+        {
+            var themeState = _themeStates[i];
+
+            themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
+
+            if (isControlSizeSmall)
+                themeState = themeState.and(CPThemeStateControlSizeSmall);
+            else if (isControlSizeMini)
+                themeState = themeState.and(CPThemeStateControlSizeMini);
+
+            // Apply HUD state to lookup
+            if (isHUD)
+                themeState = themeState.and(CPThemeStateHUD);
+
+            themeState = isKeyWindow ? themeState.and(CPThemeStateKeyWindow) : themeState;
+
+            var bezelColor,
+                segment = _segments[i],
+                bezelView = [self layoutEphemeralSubviewNamed:"segment-bezel-" + i
+                                                   positioned:CPWindowBelow
+                              relativeToEphemeralSubviewNamed:nil],
+                contentView = [self layoutEphemeralSubviewNamed:@"segment-content-" + i
+                                                     positioned:CPWindowAbove
+                                relativeToEphemeralSubviewNamed:"segment-bezel-" + i];
+
+            if (i == 0)
+                bezelColor = [self valueForThemeAttribute:@"left-segment-bezel-color" inState:themeState];
+            else if (i < count - 1)
+                bezelColor = [self valueForThemeAttribute:@"center-segment-bezel-color" inState:themeState];
+            else
+                bezelColor = [self valueForThemeAttribute:@"right-segment-bezel-color" inState:themeState];
+
+            [bezelView setBackgroundColor:bezelColor];
+
+            // Trick : Put selected segments over unselected ones to automaticaly manage borders
+
+#if PLATFORM(DOM)
+            contentView._DOMElement.style.zIndex = ([segment selected] ? 1 : 0);
+            bezelView._DOMElement.style.zIndex   = ([segment selected] ? 1 : 0);
+#endif
+
+            [contentView setText:[segment label]];
+            [contentView setImage:[segment image]];
+
+            [contentView setFont:[self valueForThemeAttribute:@"font" inState:themeState]];
+            [contentView setTextColor:[self valueForThemeAttribute:@"text-color" inState:([segment enabled] ? themeState : themeState.and(CPThemeStateDisabled))]];
+            [contentView setAlignment:[self valueForThemeAttribute:@"alignment" inState:themeState]];
+            [contentView setVerticalAlignment:[self valueForThemeAttribute:@"vertical-alignment" inState:themeState]];
+            [contentView setLineBreakMode:[self valueForThemeAttribute:@"line-break-mode" inState:themeState]];
+            [contentView setTextShadowColor:[self valueForThemeAttribute:@"text-shadow-color" inState:themeState]];
+            [contentView setTextShadowOffset:[self valueForThemeAttribute:@"text-shadow-offset" inState:themeState]];
+            [contentView setImageScaling:[self valueForThemeAttribute:@"image-scaling" inState:themeState]];
+
+            if ([segment image] && [segment label])
+                [contentView setImagePosition:[self valueForThemeAttribute:@"image-position" inState:themeState]];
+            else if ([segment image])
+                [contentView setImagePosition:CPImageOnly];
+        }
+    }
+    else
+    {
+        // Legacy (Canvas) Styling
+        var themeState = _themeStates[0],
+            isDisabled = [self hasThemeState:CPThemeStateDisabled],
+            isControlSizeSmall = [self hasThemeState:CPThemeStateControlSizeSmall],
+            isControlSizeMini = [self hasThemeState:CPThemeStateControlSizeMini];
 
         themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
 
@@ -670,59 +738,114 @@ CPSegmentSwitchTrackingMomentary = 2;
         else if (isControlSizeMini)
             themeState = themeState.and(CPThemeStateControlSizeMini);
 
-        var bezelColor = [self valueForThemeAttribute:@"center-segment-bezel-color"
-                                              inState:themeState],
+        // Apply HUD state to Left Cap
+        if (isHUD)
+            themeState = themeState.and(CPThemeStateHUD);
 
-            bezelView = [self layoutEphemeralSubviewNamed:"segment-bezel-" + i
-                                               positioned:CPWindowBelow
-                          relativeToEphemeralSubviewNamed:nil];
+        var leftCapColor = [self valueForThemeAttribute:@"left-segment-bezel-color"
+                                                inState:themeState],
 
-        [bezelView setBackgroundColor:bezelColor];
+            leftBezelView = [self layoutEphemeralSubviewNamed:@"left-segment-bezel"
+                                                   positioned:CPWindowBelow
+                              relativeToEphemeralSubviewNamed:nil];
 
-        // layout image/title views
-        var segment = _segments[i],
-            contentView = [self layoutEphemeralSubviewNamed:@"segment-content-" + i
-                                                 positioned:CPWindowAbove
-                            relativeToEphemeralSubviewNamed:@"segment-bezel-" + i];
+        [leftBezelView setBackgroundColor:leftCapColor];
 
-        [contentView setText:[segment label]];
-        [contentView setImage:[segment image]];
+        var themeState = _themeStates[_themeStates.length - 1];
 
-        [contentView setFont:[self valueForThemeAttribute:@"font" inState:themeState]];
-        [contentView setTextColor:[self valueForThemeAttribute:@"text-color" inState:themeState]];
-        [contentView setAlignment:[self valueForThemeAttribute:@"alignment" inState:themeState]];
-        [contentView setVerticalAlignment:[self valueForThemeAttribute:@"vertical-alignment" inState:themeState]];
-        [contentView setLineBreakMode:[self valueForThemeAttribute:@"line-break-mode" inState:themeState]];
-        [contentView setTextShadowColor:[self valueForThemeAttribute:@"text-shadow-color" inState:themeState]];
-        [contentView setTextShadowOffset:[self valueForThemeAttribute:@"text-shadow-offset" inState:themeState]];
-        [contentView setImageScaling:[self valueForThemeAttribute:@"image-scaling" inState:themeState]];
-
-        if ([segment image] && [segment label])
-            [contentView setImagePosition:[self valueForThemeAttribute:@"image-position" inState:themeState]];
-        else if ([segment image])
-            [contentView setImagePosition:CPImageOnly];
-
-        if (i == count - 1)
-            continue;
-
-
-        var borderState = _themeStates[i].and(_themeStates[i + 1]);
-
-        borderState = isDisabled ? borderState.and(CPThemeStateDisabled) : borderState;
+        themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
 
         if (isControlSizeSmall)
-            borderState = borderState.and(CPThemeStateControlSizeSmall);
+            themeState = themeState.and(CPThemeStateControlSizeSmall);
         else if (isControlSizeMini)
-            borderState = borderState.and(CPThemeStateControlSizeMini);
+            themeState = themeState.and(CPThemeStateControlSizeMini);
 
-        var borderColor = [self valueForThemeAttribute:@"divider-bezel-color"
-                                               inState:borderState],
+        // Apply HUD state to Right Cap
+        if (isHUD)
+            themeState = themeState.and(CPThemeStateHUD);
+
+        var rightCapColor = [self valueForThemeAttribute:@"right-segment-bezel-color"
+                                                 inState:themeState],
+
+            rightBezelView = [self layoutEphemeralSubviewNamed:@"right-segment-bezel"
+                                                    positioned:CPWindowBelow
+                               relativeToEphemeralSubviewNamed:nil];
+
+        [rightBezelView setBackgroundColor:rightCapColor];
+
+        for (var i = 0, count = _themeStates.length; i < count; i++)
+        {
+            var themeState = _themeStates[i];
+
+            themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
+
+            if (isControlSizeSmall)
+                themeState = themeState.and(CPThemeStateControlSizeSmall);
+            else if (isControlSizeMini)
+                themeState = themeState.and(CPThemeStateControlSizeMini);
+
+            // Apply HUD state to Center Segments
+            if (isHUD)
+                themeState = themeState.and(CPThemeStateHUD);
+
+            var bezelColor = [self valueForThemeAttribute:@"center-segment-bezel-color"
+                                                  inState:themeState],
+
+                bezelView = [self layoutEphemeralSubviewNamed:"segment-bezel-" + i
+                                                   positioned:CPWindowBelow
+                              relativeToEphemeralSubviewNamed:nil];
+
+            [bezelView setBackgroundColor:bezelColor];
+
+            // layout image/title views
+            var segment = _segments[i],
+                contentView = [self layoutEphemeralSubviewNamed:@"segment-content-" + i
+                                                     positioned:CPWindowAbove
+                                relativeToEphemeralSubviewNamed:@"segment-bezel-" + i];
+
+            [contentView setText:[segment label]];
+            [contentView setImage:[segment image]];
+
+            [contentView setFont:[self valueForThemeAttribute:@"font" inState:themeState]];
+            [contentView setTextColor:[self valueForThemeAttribute:@"text-color" inState:themeState]];
+            [contentView setAlignment:[self valueForThemeAttribute:@"alignment" inState:themeState]];
+            [contentView setVerticalAlignment:[self valueForThemeAttribute:@"vertical-alignment" inState:themeState]];
+            [contentView setLineBreakMode:[self valueForThemeAttribute:@"line-break-mode" inState:themeState]];
+            [contentView setTextShadowColor:[self valueForThemeAttribute:@"text-shadow-color" inState:themeState]];
+            [contentView setTextShadowOffset:[self valueForThemeAttribute:@"text-shadow-offset" inState:themeState]];
+            [contentView setImageScaling:[self valueForThemeAttribute:@"image-scaling" inState:themeState]];
+
+            if ([segment image] && [segment label])
+                [contentView setImagePosition:[self valueForThemeAttribute:@"image-position" inState:themeState]];
+            else if ([segment image])
+                [contentView setImagePosition:CPImageOnly];
+
+            if (i == count - 1)
+                continue;
+
+
+            var borderState = _themeStates[i].and(_themeStates[i + 1]);
+
+            borderState = isDisabled ? borderState.and(CPThemeStateDisabled) : borderState;
+
+            if (isControlSizeSmall)
+                borderState = borderState.and(CPThemeStateControlSizeSmall);
+            else if (isControlSizeMini)
+                borderState = borderState.and(CPThemeStateControlSizeMini);
+
+            // Apply HUD state to Dividers
+            if (isHUD)
+                borderState = borderState.and(CPThemeStateHUD);
+
+            var borderColor = [self valueForThemeAttribute:@"divider-bezel-color"
+                                                   inState:borderState],
 
             borderView = [self layoutEphemeralSubviewNamed:"divider-bezel-" + i
                                                 positioned:CPWindowBelow
                            relativeToEphemeralSubviewNamed:nil];
 
-        [borderView setBackgroundColor:borderColor];
+            [borderView setBackgroundColor:borderColor];
+        }
     }
 }
 
@@ -803,8 +926,10 @@ CPSegmentSwitchTrackingMomentary = 2;
             label = [segment label],
             image = [segment image];
 
+        contentInsetWidth += ([[self actualTheme] isCSSBased] && ((aSegment == 0) || (aSegment == [self _indexOfLastSegment])) ? [self valueForThemeAttribute:@"divider-thickness" inState:themeState] : 0);
+
         // add 1 pixel to account for possible fractional pixels at right edge
-        width = (label ? [label sizeWithFont:[self font]].width + 1 : 4.0) + (image ? [image size].width : 0) + contentInsetWidth;
+        width = CEIL((label ? [label sizeWithFont:[self font]].width + 1: 4.0) + (image ? [image size].width : 0) + contentInsetWidth);
     }
 
     return CGRectMake(left, top, width, height);
@@ -812,6 +937,14 @@ CPSegmentSwitchTrackingMomentary = 2;
 
 - (CGRect)contentFrameForSegment:(unsigned)aSegment
 {
+    if ([[self actualTheme] isCSSBased])
+    {
+        var bezelFrame = [self bezelFrameForSegment:aSegment],
+            contentInset = [self currentValueForThemeAttribute:@"content-inset"];
+
+        return CGRectInsetByInset(bezelFrame, contentInset);
+    }
+
     var height = [self currentValueForThemeAttribute:@"min-size"].height,
         contentInset = [self currentValueForThemeAttribute:@"content-inset"],
         width = CGRectGetWidth([self frameForSegment:aSegment]),
@@ -874,68 +1007,64 @@ CPSegmentSwitchTrackingMomentary = 2;
     var type = [anEvent type],
         location = [self convertPoint:[anEvent locationInWindow] fromView:nil];
 
-    switch (type)
+    if (type == CPLeftMouseUp)
     {
-        case CPLeftMouseUp:
-
-            if (_trackingSegment === CPNotFound)
-                return;
-
-            if (_trackingSegment === [self testSegment:location])
-            {
-                if (_trackingMode == CPSegmentSwitchTrackingSelectAny)
-                {
-                    [self setSelected:![self isSelectedForSegment:_trackingSegment] forSegment:_trackingSegment];
-
-                    // With ANY, _selectedSegment means last pressed.
-                    _selectedSegment = _trackingSegment;
-                }
-                else
-                    [self setSelected:YES forSegment:_trackingSegment];
-
-                [self sendAction:[self action] to:[self target]];
-
-                if (_trackingMode == CPSegmentSwitchTrackingMomentary)
-                {
-                    [self setSelected:NO forSegment:_trackingSegment];
-
-                    _selectedSegment = CPNotFound;
-                }
-            }
-
-            [self drawSegmentBezel:_trackingSegment highlight:NO];
-
-            _trackingSegment = CPNotFound;
-
+        if (_trackingSegment == -1)
             return;
 
-        case CPLeftMouseDown:
-
-            var trackingSegment = [self testSegment:location];
-            if (trackingSegment > CPNotFound && [self isEnabledForSegment:trackingSegment])
+        if (_trackingSegment === [self testSegment:location])
+        {
+            if (_trackingMode == CPSegmentSwitchTrackingSelectAny)
             {
-                _trackingHighlighted = YES;
-                _trackingSegment = trackingSegment;
-                [self drawSegmentBezel:_trackingSegment highlight:YES];
+                [self setSelected:![self isSelectedForSegment:_trackingSegment] forSegment:_trackingSegment];
+
+                // With ANY, _selectedSegment means last pressed.
+                _selectedSegment = _trackingSegment;
             }
+            else
+                [self setSelected:YES forSegment:_trackingSegment];
 
-            break;
+            [self sendAction:[self action] to:[self target]];
 
-        case CPLeftMouseDragged:
-
-            if (_trackingSegment === CPNotFound)
-                return;
-
-            var highlighted = [self testSegment:location] === _trackingSegment;
-
-            if (highlighted != _trackingHighlighted)
+            if (_trackingMode == CPSegmentSwitchTrackingMomentary)
             {
-                _trackingHighlighted = highlighted;
+                [self setSelected:NO forSegment:_trackingSegment];
 
-                [self drawSegmentBezel:_trackingSegment highlight:_trackingHighlighted];
+                _selectedSegment = CPNotFound;
             }
+        }
 
-            break;
+        [self drawSegmentBezel:_trackingSegment highlight:NO];
+
+        _trackingSegment = -1;
+
+        return;
+    }
+
+    if (type == CPLeftMouseDown)
+    {
+        var trackingSegment = [self testSegment:location];
+        if (trackingSegment > -1 && [self isEnabledForSegment:trackingSegment])
+        {
+            _trackingHighlighted = YES;
+            _trackingSegment = trackingSegment;
+            [self drawSegmentBezel:_trackingSegment highlight:YES];
+        }
+    }
+
+    else if (type == CPLeftMouseDragged)
+    {
+        if (_trackingSegment == -1)
+            return;
+
+        var highlighted = [self testSegment:location] === _trackingSegment;
+
+        if (highlighted != _trackingHighlighted)
+        {
+            _trackingHighlighted = highlighted;
+
+            [self drawSegmentBezel:_trackingSegment highlight:_trackingHighlighted];
+        }
     }
 
     [CPApp setTarget:self selector:@selector(trackSegment:) forNextEventMatchingMask:CPLeftMouseDraggedMask | CPLeftMouseUpMask untilDate:nil inMode:nil dequeue:YES];

AppKit/CPShadowView.j

@@ -102,6 +102,7 @@ CPThemeStateShadowViewHeavy = CPThemeState("shadowview-style-heavy");
         [self setWeight:CPLightShadow];
 
         [self setHitTests:NO];
+        [self setClipsToBounds:NO];
     }
 
     return self;
@@ -169,7 +170,6 @@ CPThemeStateShadowViewHeavy = CPThemeState("shadowview-style-heavy");
 - (void)layoutSubviews
 {
     [super layoutSubviews];
-
     [self setBackgroundColor:[self currentValueForThemeAttribute:@"bezel-color"]];
 }
 

AppKit/CPSplitView.j

@@ -822,6 +822,9 @@ var CPThemeStatesForSplitViewDivider = @[@"dummy one as CPSplitViewDividerStyle
 
 - (void)layoutSubviews
 {
+    // Retrieve the current color based on the current theme state (Standard vs HUD)
+    var currentDividerColor = [self dividerColor];
+
     for (var i = 0, count = _arrangedSubviews.length, position = 0, origin; i < count; i++)
     {
         origin                   = CGPointMakeZero();
@@ -836,6 +839,9 @@ var CPThemeStatesForSplitViewDivider = @[@"dummy one as CPSplitViewDividerStyle
             origin[_originComponent] = position;
             position                += [_dividerSubviews[i] frame].size[_sizeComponent];
 
+            // Apply the color to the specific divider view
+            [_dividerSubviews[i] setBackgroundColor:currentDividerColor];
+
             [_dividerSubviews[i] setFrameOrigin:origin];
         }
     }

AppKit/CPStepper.j

@@ -175,12 +175,53 @@
     [super setFrame:frame];
 }
 
+- (void)setThemeState:(CPThemeState)aState
+{
+    [super setThemeState:aState];
+    
+    // Force a layout update because the internal buttons (_buttonUp and _buttonDown)
+    // rely on layoutSubviews to receive the new theme attributes (like HUD colors).
+    [self setNeedsLayout];
+}
+
+- (void)unsetThemeState:(CPThemeState)aState
+{
+    [super unsetThemeState:aState];
+    [self setNeedsLayout];
+}
+
 /*! @ignore */
 - (void)layoutSubviews
 {
     var controlSizeThemeState = [self _controlSizeThemeState],
         aFrame = [self frame],
-        upSize = [self valueForThemeAttribute:@"up-button-size" inState:controlSizeThemeState],
+        isHUD = [self hasThemeState:CPThemeStateHUD],
+
+        // 1. Prepare Lookup States (To fetch the correct image/color from the Stepper's theme)
+        normalLookupStates = [controlSizeThemeState, CPThemeStateBordered],
+        disabledLookupStates = [controlSizeThemeState, CPThemeStateBordered, CPThemeStateDisabled],
+        highlightedLookupStates = [controlSizeThemeState, CPThemeStateBordered, CPThemeStateHighlighted],
+
+        // 2. Prepare Target States (To tell the child buttons when to use this image)
+        normalTargetStates = [CPThemeStateBordered, CPButtonStateBezelStyleRoundRect],
+        disabledTargetStates = [CPThemeStateBordered, CPThemeStateDisabled, CPButtonStateBezelStyleRoundRect],
+        highlightedTargetStates = [CPThemeStateBordered, CPThemeStateHighlighted, CPButtonStateBezelStyleRoundRect];
+
+    // If we are in HUD mode, add CPThemeStateHUD to both lookup and target arrays
+    if (isHUD)
+    {
+        // Lookup: Ask theme for "HUD" version of the stepper arrows
+        normalLookupStates.push(CPThemeStateHUD);
+        disabledLookupStates.push(CPThemeStateHUD);
+        highlightedLookupStates.push(CPThemeStateHUD);
+
+        // Target: Tell the child buttons "Use this when you are in HUD state"
+        normalTargetStates.push(CPThemeStateHUD);
+        disabledTargetStates.push(CPThemeStateHUD);
+        highlightedTargetStates.push(CPThemeStateHUD);
+    }
+
+    var upSize = [self valueForThemeAttribute:@"up-button-size" inState:controlSizeThemeState],
         downSize = [self valueForThemeAttribute:@"down-button-size" inState:controlSizeThemeState],
         upFrame = CGRectMake(0, 0, upSize.width, upSize.height),
         downFrame = CGRectMake(0, upSize.height, downSize.width, downSize.height);
@@ -188,12 +229,31 @@
     [_buttonUp setFrame:upFrame];
     [_buttonDown setFrame:downFrame];
 
-    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:[controlSizeThemeState, CPThemeStateBordered]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPButtonStateBezelStyleRoundRect]];
-    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateDisabled]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateDisabled, CPButtonStateBezelStyleRoundRect]];
-    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateHighlighted]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateHighlighted, CPButtonStateBezelStyleRoundRect]];
-    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:[controlSizeThemeState, CPThemeStateBordered]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPButtonStateBezelStyleRoundRect]];
-    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateDisabled]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateDisabled, CPButtonStateBezelStyleRoundRect]];
-    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateHighlighted]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateHighlighted, CPButtonStateBezelStyleRoundRect]];
+    // Apply Up Button Attributes
+    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:normalLookupStates]
+        forThemeAttribute:@"bezel-color"
+        inStates:normalTargetStates];
+
+    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:disabledLookupStates]
+        forThemeAttribute:@"bezel-color"
+        inStates:disabledTargetStates];
+
+    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:highlightedLookupStates]
+        forThemeAttribute:@"bezel-color"
+        inStates:highlightedTargetStates];
+
+    // Apply Down Button Attributes
+    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:normalLookupStates]
+        forThemeAttribute:@"bezel-color"
+        inStates:normalTargetStates];
+
+    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:disabledLookupStates]
+        forThemeAttribute:@"bezel-color"
+        inStates:disabledTargetStates];
+
+    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:highlightedLookupStates]
+        forThemeAttribute:@"bezel-color"
+        inStates:highlightedTargetStates];
 }
 
 - (void)_sizeToFit

AppKit/CPTabView.j

@@ -117,7 +117,7 @@ var CPTabViewDidSelectTabViewItemSelector           = 1 << 1,
     var height = [_tabs valueForThemeAttribute:@"min-size"].height;
     [_tabs setFrameSize:CGSizeMake(0, height)];
 
-    _box = [[_CPTabViewBox alloc] initWithFrame:[self  bounds]];
+    _box = [[_CPTabViewBox alloc] initWithFrame:[self bounds]];
     [_box setTabView:self];
     [_box setContentInset:[self currentValueForThemeAttribute:@"box-content-inset"]];
     [_box setContentViewMargins:CGSizeMakeZero()];

AppKit/CPTableHeaderView.j

@@ -25,6 +25,10 @@
 @import "CPCursor.j"
 @import "_CPImageAndTextView.j"
 @import "CPTrackingArea.j"
+@import "CPAnimationContext.j"
+@import "CPViewAnimator.j"
+@import "CPScrollView.j"
+@import <Foundation/CPGeometry.j>
 
 @class CPTableView
 
@@ -50,10 +54,16 @@
             @"text-color": [CPNull null],
             @"font": [CPNull null],
             @"text-shadow-color": [CPNull null],
-            @"text-shadow-offset": CGSizeMakeZero()
+            @"text-shadow-offset": CGSizeMakeZero(),
+            @"dont-draw-separator": NO
         };
 }
 
+- (BOOL)acceptsFirstMouse:(CPEvent)anEvent
+{
+    return YES;
+}
+
 - (id)initWithFrame:(CGRect)frame
 {
     self = [super initWithFrame:frame];
@@ -66,18 +76,22 @@
 
 - (void)_init
 {
+    [self setBackgroundColor:[self currentValueForThemeAttribute:@"background-color"]];
+
+    var inset = [self valueForThemeAttribute:@"text-inset"];
+
     _textField = [[_CPImageAndTextView alloc] initWithFrame:
-        CGRectMake(5.0, 0.0, CGRectGetWidth([self bounds]) - 10.0, CGRectGetHeight([self bounds]))];
+        CGRectMake(inset.left, inset.top, CGRectGetWidth([self bounds]) - (inset.left + inset.right), CGRectGetHeight([self bounds]) - (inset.top + inset.bottom))];
 
     [_textField setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
 
-    [_textField setLineBreakMode:CPLineBreakByTruncatingTail];
-    [_textField setTextColor:[CPColor colorWithRed:51.0 / 255.0 green:51.0 / 255.0 blue:51.0 / 255.0 alpha:1.0]];
-    [_textField setFont:[CPFont boldSystemFontOfSize:12.0]];
-    [_textField setAlignment:CPLeftTextAlignment];
+    [_textField setLineBreakMode:[self valueForThemeAttribute:@"line-break-mode"]];
+    [_textField setTextColor:[self valueForThemeAttribute:@"text-color"]];
+    [_textField setFont:[self valueForThemeAttribute:@"font"]];
+    [_textField setAlignment:[self valueForThemeAttribute:@"text-alignment"]];
     [_textField setVerticalAlignment:CPCenterVerticalTextAlignment];
-    [_textField setTextShadowColor:[CPColor whiteColor]];
-    [_textField setTextShadowOffset:CGSizeMake(0,1)];
+    [_textField setTextShadowColor:[self valueForThemeAttribute:@"text-shadow-color"]];
+    [_textField setTextShadowOffset:[self valueForThemeAttribute:@"text-shadow-offset"]];
 
     [self addSubview:_textField];
 }
@@ -188,6 +202,9 @@
 
 - (void)drawRect:(CGRect)aRect
 {
+    if ([self valueForThemeAttribute:@"dont-draw-separator"])
+        return;
+
     var bounds = [self bounds];
 
     if (!CGRectIntersectsRect(aRect, bounds))
@@ -223,7 +240,8 @@ var _CPTableColumnHeaderViewStringValueKey = @"_CPTableColumnHeaderViewStringVal
         [self _init];
         [self _setIndicatorImage:[aCoder decodeObjectForKey:_CPTableColumnHeaderViewImageKey]];
         [self setStringValue:[aCoder decodeObjectForKey:_CPTableColumnHeaderViewStringValueKey]];
-        [self setFont:[aCoder decodeObjectForKey:_CPTableColumnHeaderViewFontKey]];
+        // FIXME: pourquoi dans actif, font=null ?
+//        [self setFont:[aCoder decodeObjectForKey:_CPTableColumnHeaderViewFontKey]];
     }
 
     return self;
@@ -257,11 +275,13 @@ var CPTableHeaderViewResizeZone = 3.0,
 
     BOOL        _isResizing;
     BOOL        _isDragging;
+    BOOL        _isAnimating;
     BOOL        _canDragColumn;
 
     CPView      _columnDragView;
     CPView      _columnDragHeaderView;
     CPView      _columnDragClipView;
+    CPScrollView    _columnDragScrollView;
 
     float       _columnOldWidth;
 
@@ -278,7 +298,9 @@ var CPTableHeaderViewResizeZone = 3.0,
     return @{
             @"background-color": [CPNull null],
             @"divider-color": [CPColor grayColor],
-            @"divider-thickness": 1.0
+            @"divider-thickness": 1.0,
+            @"swap-animation": [CPNull null],
+            @"return-animation": [CPNull null]
         };
 }
 
@@ -340,7 +362,24 @@ var CPTableHeaderViewResizeZone = 3.0,
 
 - (CPInteger)columnAtPoint:(CGPoint)aPoint
 {
-    return [_tableView columnAtPoint:aPoint];
+    var tableView = [self tableView],
+        tableColumns = [tableView tableColumns],
+        count = [tableColumns count],
+        bounds = [self bounds],
+        // Create a point that keeps the X position but forces Y to be safely 
+        // in the middle of the header view.
+        constrainedPoint = CGPointMake(aPoint.x, CGRectGetMidY(bounds));
+
+    // Iterate through columns to find which one contains the constrained X coordinate
+    for (var i = 0; i < count; i++)
+    {
+        // headerRectOfColumn: is a utility method defined in CPTableHeaderView
+        // that handles the coordinate conversion from the table view relative to the header.
+        if (CGRectContainsPoint([self headerRectOfColumn:i], constrainedPoint))
+            return i;
+    }
+
+    return -1;
 }
 
 - (CGRect)headerRectOfColumn:(CPInteger)aColumnIndex
@@ -365,6 +404,8 @@ var CPTableHeaderViewResizeZone = 3.0,
 
 - (void)layoutSubviews
 {
+    [self setBackgroundColor:[self currentValueForThemeAttribute:@"background-color"]];
+    
     var tableColumns = [_tableView tableColumns],
         count = [tableColumns count];
 
@@ -442,6 +483,14 @@ var CPTableHeaderViewResizeZone = 3.0,
     }
     else if (_isDragging)
     {
+        // First, we have to avoid a running condition where user stops dragging while a swap animation is running
+        if (_isAnimating)
+        {
+            [CPTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(_retry_mouseUp:) userInfo:theEvent repeats:NO];
+
+            return;
+        }
+
         [self _stopDraggingTableColumn:_activeColumn];
     }
     else if (_activeColumn != -1)
@@ -458,6 +507,11 @@ var CPTableHeaderViewResizeZone = 3.0,
     _activeColumn = -1;
 }
 
+- (void)_retry_mouseUp:(CPTimer)aTimer
+{
+    [self mouseUp:[aTimer userInfo]];
+}
+
 @end
 
 @implementation CPTableHeaderView (CPTrackingArea)
@@ -562,7 +616,21 @@ var CPTableHeaderViewResizeZone = 3.0,
                                              pressure:[theEvent pressure]];
 
     [self autoscroll:constrainedEvent];
+
+    var contentView = [_tableView superview],
+        boundsOriginBefore = [contentView boundsOrigin];
+
     [_tableView autoscroll:constrainedEvent];
+
+    var boundsOriginAfter = [contentView boundsOrigin],
+        deltaX = boundsOriginAfter.x - boundsOriginBefore.x;
+
+    if (_isDragging)
+    {
+        var dragContentView = [_columnDragScrollView contentView],
+            dragContentBoundsOrigin = [dragContentView boundsOrigin];
+        [dragContentView setBoundsOrigin:CGPointMake(dragContentBoundsOrigin.x + deltaX, dragContentBoundsOrigin.y)];
+    }
 }
 
 - (CGRect)_headerRectOfLastVisibleColumn
@@ -584,16 +652,91 @@ var CPTableHeaderViewResizeZone = 3.0,
 - (CGPoint)_constrainDragPoint:(CGPoint)aPoint
 {
     // This effectively clamps the value between the minimum and maximum
-    var visibleRect = [_tableView visibleRect],
-        lastColumnRect = [self _headerRectOfLastVisibleColumn],
-        activeColumnRect = [self headerRectOfColumn:_activeColumn],
-        maxX = CGRectGetMaxX(lastColumnRect) - CGRectGetWidth(activeColumnRect) - CGRectGetMinX(visibleRect),
-        point = CGPointMake(MAX(MIN(aPoint.x, maxX), -CGRectGetMinX(visibleRect)), aPoint.y);
+    var tableFrame = [_tableView frame],
+        dragFrame  = [_columnDragView frame],
+        maxX = tableFrame.size.width - dragFrame.size.width,
+        point = CGPointMake(MAX(MIN(aPoint.x, maxX),0), aPoint.y);
 
     return point;
 }
 
 - (void)_moveColumn:(CPInteger)aFromIndex toColumn:(CPInteger)aToIndex
+{
+    if (_isAnimating)
+        return;
+
+    var swapAnimation = [self currentValueForThemeAttribute:@"swap-animation"];
+
+    if (swapAnimation)
+    {
+        _isAnimating = YES;
+
+        // There's a theme defined animation function, just use it
+        objj_eval("("+swapAnimation+")")(self, aFromIndex, aToIndex, _columnDragClipView, _columnDragView);
+
+//        var animatedColumn       = [[_tableView tableColumns] objectAtIndex:aToIndex],
+//            animatedHeader       = [animatedColumn headerView],
+//            animatedHeaderOrigin = [animatedHeader frameOrigin],
+//
+//            destinationX,
+//            draggedHeader        = [[[_tableView tableColumns] objectAtIndex:aFromIndex] headerView],
+//
+//            scrollView = [self enclosingScrollView],
+//            animatedView = [_tableView _animationViewForColumn:aToIndex],
+//            animatedOrigin = [animatedView frameOrigin];
+//
+//        [_columnDragClipView addSubview:animatedView positioned:CPWindowBelow relativeTo:_columnDragView];
+//
+//        [[animatedHeader subviews] makeObjectsPerformSelector:@selector(setHidden:) withObject:YES];
+//        [animatedHeader setThemeState:CPThemeStateVertical];
+//
+//        if (aFromIndex < aToIndex)
+//            destinationX = CGRectGetMinX([_tableView rectOfColumn:aFromIndex]);
+//        else
+//            destinationX = animatedOrigin.x + CGRectGetWidth([_tableView rectOfColumn:aFromIndex]);
+//
+//        [CPAnimationContext beginGrouping];
+//
+//        var context = [CPAnimationContext currentContext];
+//
+//        [context setDuration:0.15];
+//        [context setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
+//        [context setCompletionHandler:function() {
+//            [animatedView removeFromSuperview];
+//
+//            [self _finalize_moveColumn:aFromIndex toColumn:aToIndex];
+//
+//            [animatedHeader unsetThemeState:CPThemeStateVertical];
+//            [[animatedHeader subviews] makeObjectsPerformSelector:@selector(setHidden:) withObject:NO];
+//
+//            if ([animatedView isSelected])
+//            {
+//                [animatedHeader setThemeState:CPThemeStateSelected];
+//
+//                // We have to reselect the animated column
+//                [[_tableView selectedColumnIndexes] addIndex:aFromIndex];
+//            }
+//
+//            // Reload animated column
+//            var columnVisRect  = CGRectIntersection([_tableView rectOfColumn:aFromIndex], [_tableView visibleRect]),
+//                rowsIndexes    = [CPIndexSet indexSetWithIndexesInRange:[_tableView rowsInRect:columnVisRect]],
+//                columnsIndexes = [CPIndexSet indexSetWithIndex:aFromIndex];
+//
+//            [_tableView _loadDataViewsInRows:rowsIndexes columns:columnsIndexes];
+//            [_tableView _layoutViewsForRowIndexes:rowsIndexes columnIndexes:columnsIndexes];
+//
+//            [_tableView._tableDrawView displayRect:columnVisRect];
+//        }];
+//
+//        [[animatedView animator] setFrameOrigin:CGPointMake(destinationX, animatedOrigin.y)];
+//
+//        [CPAnimationContext endGrouping];
+    }
+    else
+        [self _finalize_moveColumn:aFromIndex toColumn:aToIndex];
+}
+
+- (void)_finalize_moveColumn:(CPInteger)aFromIndex toColumn:(CPInteger)aToIndex
 {
     [_tableView moveColumn:aFromIndex toColumn:aToIndex];
     _activeColumn = aToIndex;
@@ -602,6 +745,8 @@ var CPTableHeaderViewResizeZone = 3.0,
     [_tableView _setDraggedColumn:_activeColumn];
 
     [self setNeedsDisplay:YES];
+
+    _isAnimating = NO;
 }
 
 - (BOOL)isDragging
@@ -618,17 +763,30 @@ var CPTableHeaderViewResizeZone = 3.0,
     // Create a new clip view for the drag view that clips to the header + visible content
     var headerHeight = CGRectGetHeight([self frame]),
         scrollView = [self enclosingScrollView],
-        contentFrame = [[scrollView contentView] frame];
+        contentFrame = [[scrollView contentView] frame],
+        contentBounds = [[scrollView contentView] bounds];
 
     contentFrame.origin.y -= headerHeight;
     contentFrame.size.height += headerHeight;
 
-    _columnDragClipView = [[CPView alloc] initWithFrame:contentFrame];
+    _columnDragScrollView = [[CPScrollView alloc] initWithFrame:contentFrame];
+
+    [_columnDragScrollView setHasHorizontalScroller:NO];
+    [_columnDragScrollView setHasVerticalScroller:NO];
+    [_columnDragScrollView setBorderType:CPNoBorder];
+
+    var tableFrame = [_tableView frame],
+        clipFrame = CGRectMake(0, 0, tableFrame.size.width, contentFrame.size.height);
+
+    _columnDragClipView = [[CPView alloc] initWithFrame:clipFrame];
 
     [_columnDragClipView addSubview:_columnDragView];
 
+    [_columnDragScrollView setDocumentView:_columnDragClipView];
+    [[_columnDragScrollView contentView] setBoundsOrigin:CGPointMake(contentBounds.origin.x, 0)];
+
     // Insert the clip view above the table header (and content)
-    [scrollView addSubview:_columnDragClipView positioned:CPWindowAbove relativeTo:self];
+    [scrollView addSubview:_columnDragScrollView positioned:CPWindowAbove relativeTo:self];
 
     // Hide the underlying column header subviews, we just want to draw the chrome
     var headerView = [[[_tableView tableColumns] objectAtIndex:aColumnIndex] headerView];
@@ -638,6 +796,9 @@ var CPTableHeaderViewResizeZone = 3.0,
     // The underlying column header shows normal state
     [headerView unsetThemeStates:[CPThemeStateHighlighted, CPThemeStateSelected]];
 
+    // FIXME: Just a little hack to get a special background (using an unused theme state)
+    [headerView setThemeState:CPThemeStateVertical];
+
     // Keep track of the location within the column header where the original mousedown occurred
     _columnDragHeaderView = [_columnDragView viewWithTag:CPTableHeaderViewDragColumnHeaderTag];
 
@@ -692,10 +853,43 @@ var CPTableHeaderViewResizeZone = 3.0,
 }
 
 - (void)_stopDraggingTableColumn:(CPInteger)aColumnIndex
+{
+    var returnAnimation = [self currentValueForThemeAttribute:@"return-animation"];
+
+    if (returnAnimation)
+    {
+        _isAnimating = YES;
+
+        // There's a theme defined animation function, just use it
+        objj_eval("("+returnAnimation+")")(self, aColumnIndex, _columnDragView);
+
+//        var animatedColumn       = [[_tableView tableColumns] objectAtIndex:aColumnIndex],
+//            animatedHeader       = [animatedColumn headerView],
+//            animatedHeaderOrigin = [animatedHeader frameOrigin];
+//
+//        [CPAnimationContext beginGrouping];
+//
+//        var context = [CPAnimationContext currentContext];
+//
+//        [context setDuration:0.15];
+//        [context setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
+//        [context setCompletionHandler:function() {
+//
+//            [self _finalize_stopDraggingTableColumn:aColumnIndex];
+//        }];
+//
+//        [[_columnDragView animator] setFrameOrigin:CGPointMake(animatedHeaderOrigin.x, 0)];
+//
+//        [CPAnimationContext endGrouping];
+    }
+    else
+        [self _finalize_stopDraggingTableColumn:aColumnIndex];
+}
+
+- (void)_finalize_stopDraggingTableColumn:(CPInteger)aColumnIndex
 {
     _isDragging = NO;
 
-    [_columnDragClipView removeFromSuperview];
     [_tableView _setDraggedColumn:-1];
 
     var tableColumn = [[_tableView tableColumns] objectAtIndex:aColumnIndex],
@@ -703,16 +897,30 @@ var CPTableHeaderViewResizeZone = 3.0,
 
     [[headerView subviews] makeObjectsPerformSelector:@selector(setHidden:) withObject:NO];
 
+    // Restore headerView background
+    [headerView unsetThemeState:CPThemeStateVertical];
+
     if (_tableView._draggedColumnIsSelected)
         [headerView setThemeState:CPThemeStateSelected];
 
-    [_tableView _reloadDataViews];
-    [[_tableView headerView] setNeedsLayout];
+    // Reload animated column
+    var columnVisRect  = CGRectIntersection([_tableView rectOfColumn:aColumnIndex], [_tableView visibleRect]),
+        rowsIndexes    = [CPIndexSet indexSetWithIndexesInRange:[_tableView rowsInRect:columnVisRect]],
+        columnsIndexes = [CPIndexSet indexSetWithIndex:aColumnIndex];
 
-    [[CPCursor arrowCursor] set];
+    [_tableView _loadDataViewsInRows:rowsIndexes columns:columnsIndexes];
+    [_tableView _layoutViewsForRowIndexes:rowsIndexes columnIndexes:columnsIndexes];
+    [_tableView _updateDataViewsFocusState];
+    [_tableView._tableDrawView displayRect:columnVisRect];
+
+    [[CPCursor arrowCursor] set]; // FIXME: retirer ?
     [self updateTrackingAreas];
 
+    [_columnDragScrollView removeFromSuperview];
+
     [_tableView _sendDelegateDidDragTableColumn:tableColumn];
+
+    _isAnimating = NO;
 }
 
 - (BOOL)_shouldResizeTableColumn:(CPInteger)aColumnIndex at:(CGPoint)aPoint

AppKit/CPTextField.j

@@ -771,33 +771,27 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder");
         verticalAlign = [self currentValueForThemeAttribute:"vertical-alignment"],
         left          = CGRectGetMinX(contentRect);
 
-    // If the browser has a built in left padding, compensate for it. We need the input text to be exactly on top of the original text.
-    if (CPFeatureIsCompatible(CPInput1PxLeftPadding))
-        left -= 1;
-
     switch (verticalAlign)
     {
         case CPTopVerticalTextAlignment:
-            var topPoint = CGRectGetMinY(contentRect) + "px";
+            var topPoint = CEIL(CGRectGetMinY(contentRect)) + "px";
             break;
 
         case CPCenterVerticalTextAlignment:
-            var topPoint = (CGRectGetMidY(contentRect) - (lineHeight / 2)) + "px";
+            var topPoint = CEIL((CGRectGetMidY(contentRect) - (lineHeight / 2))) + "px";
             break;
 
         case CPBottomVerticalTextAlignment:
-            var topPoint = (CGRectGetMaxY(contentRect) - lineHeight) + "px";
+            var topPoint = CEIL((CGRectGetMaxY(contentRect) - lineHeight)) + "px";
             break;
 
         default:
-            var topPoint = CGRectGetMinY(contentRect) + "px";
+            var topPoint = CEIL(CGRectGetMinY(contentRect)) + "px";
             break;
     }
 
-    if ([self hasThemeState:CPTextFieldStatePlaceholder])
-        element.style.color = [[self valueForThemeAttribute:@"text-color" inState:CPTextFieldStatePlaceholder] cssString];
-    else
-        element.style.color = [[self valueForThemeAttribute:@"text-color" inState:CPThemeStateEditing] cssString];
+    // Use currentValueForThemeAttribute to respect all current states (HUD, Placeholder, Editing, etc.)
+    element.style.color = [[self currentValueForThemeAttribute:@"text-color"] cssString];
 
     switch ([self alignment])
     {
@@ -1301,6 +1295,16 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder");
     [super textDidChange:note];
 }
 
+- (void)validateEditing
+{
+#if PLATFORM(DOM)
+    var element = [self _inputElement];
+    
+    if (element)
+        [self _setStringValue:element.value isNewValue:YES errorDescription:nil];
+#endif
+}
+
 - (void)textDidBeginEditing:(CPNotification)note
 {
     //this looks to prevent false propagation of notifications for other objects

AppKit/CPTextView/CPTextView.j

@@ -870,6 +870,11 @@ var kDelegateRespondsTo_textShouldBeginEditing
 - (void)drawInsertionPointInRect:(CGRect)aRect color:(CPColor)aColor turnedOn:(BOOL)flag
 {
     [_caret setRect:aRect];
+
+#if PLATFORM(DOM)
+    _caret._caretDOM.style.backgroundColor = [_insertionPointColor cssString] || "black";
+#endif
+
     [_caret setVisibility:flag stop:NO];
 }
 
@@ -3024,7 +3029,6 @@ var CPTextViewAllowsUndoKey = @"CPTextViewAllowsUndoKey",
             style.padding = "0px";
             style.margin = "0px";
             style.whiteSpace = "pre";
-            style.backgroundColor = "black";
             _caretDOM.style.width = "1px";
             _caretDOM.style.zIndex = 10001;
             _textView = aView;

AppKit/CPTheme.j

@@ -814,10 +814,12 @@ CPThemeStateKeyWindow           = CPThemeState("keyWindow");
 CPThemeStateControlSizeRegular  = CPThemeState("controlSizeRegular");
 CPThemeStateControlSizeSmall    = CPThemeState("controlSizeSmall");
 CPThemeStateControlSizeMini     = CPThemeState("controlSizeMini");
+CPThemeStateControlSizeLarge    = CPThemeState("controlSizeLarge");
 CPThemeStateAlternateState      = CPThemeState("alternate");
 CPThemeStateComposedControl     = CPThemeState("composed");
-
+CPThemeStateWindowsPlatform     = CPThemeState("windowsPlatform");
 CPThemeStateNormalString        = String(CPThemeStateNormal);
+CPThemeStateHUD                 = CPThemeState("hud");
 
 
 @implementation _CPThemeAttribute : CPObject

AppKit/CPView.j

@@ -334,8 +334,9 @@ var CPViewHighDPIDrawingEnabled = YES;
 {
     return @{
              @"css-based": NO,
-             @"dynamic-set": [CPNull null],
-             @"nib2cib-adjustment-frame": CGRectMakeZero()
+             @"nib2cib-adjustment-frame": [CPNull null],
+             @"direct-nib2cib-adjustment": NO,
+             @"dynamic-set": [CPNull null]
              };
 }
 
@@ -928,6 +929,13 @@ var CPViewHighDPIDrawingEnabled = YES;
 */
 - (void)viewDidMoveToWindow
 {
+    var window = [self window];
+
+    // If the view is inside a window with the HUD style mask, turn on the HUD state
+    if (window && ([window styleMask] & CPHUDBackgroundWindowMask))
+        [self setThemeState:CPThemeStateHUD];
+    else
+        [self unsetThemeState:CPThemeStateHUD];
 }
 
 /*!
@@ -4171,3 +4179,27 @@ var _CPViewGetTransform = function(/*CPView*/ fromView, /*CPView */ toView)
 
     return transform;
 };
+
+@implementation CPView (ThemingAdditions)
+
+- (void)_setThemeStateRecursively:(ThemeState)aState
+{
+    [_subviews makeObjectsPerformSelector:@selector(_setThemeStateRecursively:) withObject:aState];
+
+    [_subviews enumerateObjectsUsingBlock:function(view, idx, stop)
+    {
+        [view setThemeState:aState];
+    }];
+}
+
+- (void)_unsetThemeStateRecursively:(ThemeState)aState
+{
+    [_subviews makeObjectsPerformSelector:@selector(_unsetThemeStateRecursively:) withObject:aState];
+
+    [_subviews enumerateObjectsUsingBlock:function(view, idx, stop)
+    {
+        [view unsetThemeState:aState];
+    }];
+}
+
+@end

AppKit/CPViewAnimation.j

@@ -28,6 +28,8 @@ CPViewAnimationTargetKey = @"CPViewAnimationTargetKey";
 CPViewAnimationStartFrameKey = @"CPViewAnimationStartFrameKey";
 CPViewAnimationEndFrameKey = @"CPViewAnimationEndFrameKey";
 CPViewAnimationEffectKey = @"CPViewAnimationEffectKey";
+CPViewAnimationStartOpacityKey = @"CPViewAnimationStartOpacityKey";
+CPViewAnimationEndOpacityKey = @"CPViewAnimationEndOpacityKey";
 
 CPViewAnimationFadeInEffect = @"CPViewAnimationFadeInEffect";
 CPViewAnimationFadeOutEffect = @"CPViewAnimationFadeOutEffect";
@@ -132,12 +134,24 @@ CPViewAnimationFadeOutEffect = @"CPViewAnimationFadeOutEffect";
 
         [view setFrame:intermediateFrame];
 
-        // Update the view's alpha value
-        var effect = [self _effect:dictionary];
-        if (effect === CPViewAnimationFadeInEffect)
-            [view setAlphaValue:1.0 * value];
-        else if (effect === CPViewAnimationFadeOutEffect)
-            [view setAlphaValue:1.0 + ( 0.0 - 1.0 ) * value];
+        // Check for explicit Opacity keys first
+        var startOpacity = [dictionary objectForKey:CPViewAnimationStartOpacityKey],
+            endOpacity = [dictionary objectForKey:CPViewAnimationEndOpacityKey];
+
+        if (startOpacity != nil && endOpacity != nil)
+        {
+            // Interpolate alpha
+            [view setAlphaValue:startOpacity + (endOpacity - startOpacity) * value];
+        }
+        else 
+        {
+            // Fallback to legacy Effect keys
+            var effect = [self _effect:dictionary];
+            if (effect === CPViewAnimationFadeInEffect)
+                [view setAlphaValue:1.0 * value];
+            else if (effect === CPViewAnimationFadeOutEffect)
+                [view setAlphaValue:1.0 + ( 0.0 - 1.0 ) * value];
+        }
 
         if (progress === 1.0)
             [self _targetView:view setHidden:CGRectIsEmpty(endFrame) || [view alphaValue] === 0.0];
@@ -155,11 +169,20 @@ CPViewAnimationFadeOutEffect = @"CPViewAnimationFadeOutEffect";
 
         [view setFrame:endFrame];
 
-        var effect = [self _effect:dictionary];
-        if (effect === CPViewAnimationFadeInEffect)
-            [view setAlphaValue:1.0];
-        else if (effect === CPViewAnimationFadeOutEffect)
-            [view setAlphaValue:0.0];
+        var endOpacity = [dictionary objectForKey:CPViewAnimationEndOpacityKey];
+        
+        if (endOpacity != nil)
+        {
+            [view setAlphaValue:endOpacity];
+        }
+        else
+        {
+            var effect = [self _effect:dictionary];
+            if (effect === CPViewAnimationFadeInEffect)
+                [view setAlphaValue:1.0];
+            else if (effect === CPViewAnimationFadeOutEffect)
+                [view setAlphaValue:0.0];
+        }
 
         [self _targetView:view setHidden:CGRectIsEmpty(endFrame) || [view alphaValue] === 0.0];
     }

AppKit/CPWindow/CPWindow.j

@@ -979,6 +979,9 @@ CPTexturedBackgroundWindowMask
 - (void)orderFront:(id)aSender
 {
     [self orderWindow:CPWindowAbove relativeTo:0];
+
+    if (_styleMask & CPHUDBackgroundWindowMask)
+        [_contentView _setThemeStateRecursively:CPThemeStateHUD];
 }
 
 - (void)_orderFront
@@ -2539,6 +2542,10 @@ CPTexturedBackgroundWindowMask
 
     [[CPNotificationCenter defaultCenter] postNotificationName:CPWindowWillCloseNotification object:self];
 
+    // Give a chance to the _windowView to do things before closing (for example, remove an observer)
+    if ([_windowView respondsToSelector:@selector(_close)])
+        [_windowView _close];
+
     [_parentWindow removeChildWindow:self];
     [self _orderOutRecursively:NO];
     [self _detachFromChildrenClosing:!_parentWindow];

AppKit/CPWindow/_CPBorderlessBridgeWindowView.j

@@ -39,6 +39,22 @@
         };
 }
 
+- (id)initWithFrame:(CGRect)aFrame styleMask:(unsigned)aStyleMask
+{
+    self = [super initWithFrame:aFrame styleMask:aStyleMask];
+
+    if (self)
+    {
+        // Check if the mask contains the HUD flag
+        if (aStyleMask & CPHUDBackgroundWindowMask)
+        {
+            [self setBackgroundColor:[CPColor blackColor]];
+        }
+    }
+
+    return self;
+}
+
 - (void)setShowsResizeIndicator:(BOOL)shouldShowResizeIndicator
 {
     // We don't ever want to show the resize indicator.

AppKit/CPWindow/_CPStandardWindowView.j

@@ -22,6 +22,7 @@
 
 @import "CPButton.j"
 @import "_CPTitleableWindowView.j"
+@import "CPApplication_Constants.j"
 
 @class _CPDocModalWindowView
 
@@ -43,7 +44,11 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
 + (CPDictionary)themeAttributes
 {
-    return @{};
+    return @{
+                @"close-active-image-button": [CPNull null],
+                @"minimize-active-image-button": [CPNull null],
+                @"zoom-active-image-button": [CPNull null],
+            };
 }
 
 - (id)initWithFrame:(CGRect)aFrame windowView:(_CPWindowView)parentView
@@ -71,19 +76,26 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
         bounds = [self bounds],
         bezelHeadColor = [[CPTheme defaultTheme] valueForAttributeWithName:_isSheet ? @"bezel-head-sheet-color" : @"bezel-head-color" inState:[_parentView themeState] forClass:_CPStandardWindowView];
 
-    [_gradientView setFrame:CGRectMake(0.0, 0.0, CGRectGetWidth(bounds), gradientHeight)];
-    [_gradientView setBackgroundColor:bezelHeadColor];
+    // Apply the border/background color to self (the container) so borders are drawn on the outside
+    [self setBackgroundColor:bezelHeadColor];
 
-    [_solidView setFrame:CGRectMake(0.0, gradientHeight, CGRectGetWidth(bounds), CGRectGetHeight(bounds) - gradientHeight)];
+    // Set x=0.0 to avoid 1px gap. Width is reduced by 2.0 to fit inside the 1px borders on each side.
+    [_gradientView setFrame:CGRectMake(0.0, 0.0, CGRectGetWidth(bounds) - 2.0, gradientHeight)];
+    
+    // Set x=0.0 to avoid 1px gap. Width is reduced by 2.0.
+    [_solidView setFrame:CGRectMake(0.0, gradientHeight, CGRectGetWidth(bounds) - 2.0, CGRectGetHeight(bounds) - gradientHeight)];
     [_solidView setBackgroundColor:[[CPTheme defaultTheme] valueForAttributeWithName:@"solid-color" forClass:_CPStandardWindowView]];
 }
 
 - (void)resizeSubviewsWithOldSize:(CGSize)aSize
 {
-    var bounds = [self bounds];
+    var bounds = [self bounds],
+        width = CGRectGetWidth(bounds) - 2.0; // Account for border inset
 
-    [_gradientView setFrameSize:CGSizeMake(CGRectGetWidth(bounds), [[CPTheme defaultTheme] valueForAttributeWithName:@"gradient-height" forClass:_CPStandardWindowView])];
-    [_solidView setFrameSize:CGSizeMake(CGRectGetWidth(bounds), CGRectGetHeight(bounds) - [[CPTheme defaultTheme] valueForAttributeWithName:@"gradient-height" forClass:_CPStandardWindowView])];
+    if (width < 0) width = 0;
+
+    [_gradientView setFrameSize:CGSizeMake(width, [[CPTheme defaultTheme] valueForAttributeWithName:@"gradient-height" forClass:_CPStandardWindowView])];
+    [_solidView setFrameSize:CGSizeMake(width, CGRectGetHeight(bounds) - [[CPTheme defaultTheme] valueForAttributeWithName:@"gradient-height" forClass:_CPStandardWindowView])];
 }
 
 @end
@@ -97,9 +109,16 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
     CPButton                    _closeButton;
     CPButton                    _minimizeButton;
+    CPButton                    _zoomButton;
 
     BOOL                        _isDocumentEdited;
     BOOL                        _isSheet;
+    
+    CPTrackingArea              _closeButtonTrackingArea;
+    CPTrackingArea              _minimizeButtonTrackingArea;
+    CPTrackingArea              _zoomButtonTrackingArea;
+
+    int                         _buttonsWidth;
 }
 
 + (CPString)defaultThemeClass
@@ -123,6 +142,8 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
             @"close-image-highlighted-button": [CPNull null],
             @"unsaved-image-button": [CPNull null],
             @"unsaved-image-highlighted-button": [CPNull null],
+            @"zoom-image-button": [CPNull null],
+            @"zoom-image-highlighted-button": [CPNull null]
         };
 }
 
@@ -154,7 +175,7 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
         var theClass = [self class],
             bounds = [self bounds];
 
-        _headView = [[_CPTexturedWindowHeadView alloc] initWithFrame:CGRectMake(0.0, 0.0, CGRectGetWidth(bounds), [self valueForThemeAttribute:@"title-bar-height"]) windowView:self];
+        _headView = [[_CPTexturedWindowHeadView alloc] initWithFrame:CGRectMake(0.0, 0.0, CGRectGetWidth(bounds), _titleBarHeight) windowView:self];
 
         [_headView setAutoresizingMask:CPViewWidthSizable];
         [_headView setHitTests:NO];
@@ -181,30 +202,50 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
         if (_styleMask & CPClosableWindowMask)
         {
-            _closeButton = [[CPButton alloc] initWithFrame:CGRectMake(8.0, 8.0, 16.0, 16.0)];
+            _closeButton = [[CPButton alloc] initWithFrame:CGRectMakeZero()];
 
             [_closeButton setButtonType:CPMomentaryChangeButton];
             [_closeButton setBordered:NO];
-            [self _updateCloseButton];
 
             [self addSubview:_closeButton];
         }
 
-        if (_styleMask & CPMiniaturizableWindowMask && ![CPPlatform isBrowser])
+        if (_styleMask & CPMiniaturizableWindowMask)
         {
-            _minimizeButton = [[CPButton alloc] initWithFrame:CGRectMake(27.0, 7.0, 16.0, 16.0)];
+            _minimizeButton = [[CPButton alloc] initWithFrame:CGRectMakeZero()];
+
             [_minimizeButton setButtonType:CPMomentaryChangeButton];
             [_minimizeButton setBordered:NO];
 
             [self addSubview:_minimizeButton];
         }
 
+        if (_styleMask & CPResizableWindowMask)
+        {
+            _zoomButton = [[CPButton alloc] initWithFrame:CGRectMakeZero()];
+
+            [_zoomButton setButtonType:CPMomentaryChangeButton];
+            [_zoomButton setBordered:NO];
+
+            [self addSubview:_zoomButton];
+        }
+
+        [self _updateWindowButtons:YES];
         [self tile];
+
+        // Observe CPApplicationOSBehaviorDidChangeNotification
+        [[CPNotificationCenter defaultCenter] addObserver:self selector:@selector(_osBehaviorDidChange:) name:CPApplicationOSBehaviorDidChangeNotification object:CPApp];
     }
 
     return self;
 }
 
+// This will be called by CPWindow -close so the observer can be removed
+- (void)_close
+{
+    [[CPNotificationCenter defaultCenter] removeObserver:self name:CPApplicationOSBehaviorDidChangeNotification object:CPApp];
+}
+
 - (void)viewDidMoveToWindow
 {
     [_closeButton setTarget:[self window]];
@@ -212,11 +253,14 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
     [_minimizeButton setTarget:[self window]];
     [_minimizeButton setAction:@selector(performMiniaturize:)];
+
+    [_zoomButton setTarget:[self window]];
+    [_zoomButton setAction:@selector(performZoom:)];
 }
 
 - (CGSize)toolbarOffset
 {
-    return CGSizeMake(0.0, [self valueForThemeAttribute:@"title-bar-height"]);
+    return CGSizeMake(0.0, _titleBarHeight);
 }
 
 - (void)tile
@@ -236,6 +280,7 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
     [_headView setFrameSize:CGSizeMake(width, headHeight)];
 
+    // Set divider to full width to prevent gaps/holes at the sides.
     [_dividerView setFrame:CGRectMake(0.0, headHeight, width, _CPStandardWindowViewDividerViewHeight)];
 
     var dividerMinY = 0,
@@ -246,52 +291,179 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
     [_bodyView setFrame:CGRectMake(0.0, dividerMinY, width, CGRectGetHeight(bounds) - dividerMinY)];
 
-    var leftOffset = 8;
-
-    if (_closeButton)
-        leftOffset += 19.0;
-    if (_minimizeButton)
-        leftOffset += 19.0;
-
-    [_titleField setFrame:CGRectMake(leftOffset, 0, width - leftOffset * 2.0, [self valueForThemeAttribute:@"title-bar-height"])];
+    [_titleField setFrame:CGRectMake(_buttonsWidth, 0, width - _buttonsWidth * 2.0, _titleBarHeight)];
 
     var contentFrame = [_bodyView frame];
     [[theWindow contentView] setFrame:CGRectInset(contentFrame, 1.0, 1.0)];
 }
 
-/*
-- (void)setAnimatingToolbar:(BOOL)isAnimatingToolbar
+- (void)_updateWindowButtons:(BOOL)shouldRefreshLayout
 {
-    [super setAnimatingToolbar:isAnimatingToolbar];
-
-    if ([self isAnimatingToolbar])
+    if (shouldRefreshLayout)
     {
-        [[self toolbarView] setAutoresizingMask:CPViewHeightSizable];
+        var mimicWindows = [CPApp shouldMimicWindows];
 
-        [_headView setAutoresizingMask:CPViewHeightSizable];
-        [_dividerView setAutoresizingMask:CPViewMinYMargin];
-        [_bodyView setAutoresizingMask:CPViewMinYMargin];
+        if (mimicWindows)
+            [self setThemeState:CPThemeStateWindowsPlatform];
+        else
+            [self unsetThemeState:CPThemeStateWindowsPlatform];
 
-        [[[self window] contentView] setAutoresizingMask:CPViewNotSizable];
+        // Remember that on Cappuccino, buttons are (left to right) : close - minimize - zoom
+        // and that on Windows, (also left to right) : minimize - zoom - close
+
+        var offset,
+            mask,
+            closeThemeOrigin    = CGPointMakeCopy([self currentValueForThemeAttribute:@"close-image-origin"]    || CGPointMakeZero()),
+            minimizeThemeOrigin = CGPointMakeCopy([self currentValueForThemeAttribute:@"minimize-image-origin"] || CGPointMakeZero()),
+            zoomThemeOrigin     = CGPointMakeCopy([self currentValueForThemeAttribute:@"zoom-image-origin"]     || CGPointMakeZero()),
+            closeThemeSize      = CGSizeMakeZero(),
+            minimizeThemeSize   = CGSizeMakeZero(),
+            zoomThemeSize       = CGSizeMakeZero(),
+            delta1,
+            delta2;
+
+        // For retro-compatibility
+        if (![self isCSSBased])
+        {
+            if (mimicWindows)
+            {
+                // There's no zoom button in Aristo2
+                closeThemeOrigin    = CGPointMake(-24.0, 8.0);
+                minimizeThemeOrigin = CGPointMake(-43.0, 8.0);
+
+                // FIXME: if someone designs a zoom button in Aristo2 one day, use those values
+                // closeThemeOrigin    = CGPointMake(-24.0, 8.0);
+                // minimizeThemeOrigin = CGPointMake(-62.0, 8.0);
+                // zoomThemeOrigin     = CGPointMake(-43.0, 8.0);
+            }
+            else
+            {
+                closeThemeOrigin    = CGPointMake(8.0, 8.0);
+                minimizeThemeOrigin = CGPointMake(27.0, 8.0);
+                zoomThemeOrigin     = CGPointMake(46.0, 8.0);
+            }
+        }
+
+        if (mimicWindows)
+        {
+            offset = [self bounds].size.width;
+            mask   = CPViewMinXMargin;
+            delta1 = zoomThemeOrigin.x - closeThemeOrigin.x;
+            delta2 = minimizeThemeOrigin.x - zoomThemeOrigin.x;
+        }
+        else
+        {
+            offset = 0;
+            mask   = CPViewMaxXMargin;
+            delta1 = minimizeThemeOrigin.x - closeThemeOrigin.x;
+            delta2 = zoomThemeOrigin.x - minimizeThemeOrigin.x;
+        }
+
+        _buttonsWidth = 0;
+
+        if (_styleMask & CPClosableWindowMask)
+        {
+            closeThemeSize = [self currentValueForThemeAttribute:@"close-image-size"];
+
+            // For retro-compatibility:
+            if (!closeThemeSize)
+                closeThemeSize = CGSizeMake(16.0, 16.0);
+
+            [_closeButton setFrame:CGRectMake(closeThemeOrigin.x + offset, closeThemeOrigin.y, closeThemeSize.width, closeThemeSize.height)];
+            [_closeButton setAutoresizingMask:mask];
+
+            _buttonsWidth = ABS(closeThemeOrigin.x) + (mimicWindows ? 0 : closeThemeSize.width);
+        }
+        else
+        {
+            minimizeThemeOrigin.x -= delta1;
+            zoomThemeOrigin.x     -= delta1;
+        }
+
+        if (mimicWindows)
+        {
+            if (_styleMask & CPResizableWindowMask)
+            {
+                zoomThemeSize = [self currentValueForThemeAttribute:@"zoom-image-size"];
+
+                // For retro-compatibility:
+                if (!zoomThemeSize)
+                    zoomThemeSize = CGSizeMake(16.0, 16.0);
+
+                [_zoomButton setFrame:CGRectMake(zoomThemeOrigin.x + offset, zoomThemeOrigin.y, zoomThemeSize.width, zoomThemeSize.height)];
+                [_zoomButton setAutoresizingMask:mask];
+
+                _buttonsWidth = ABS(zoomThemeOrigin.x);
+            }
+            else
+                minimizeThemeOrigin.x -= delta2;
+
+            if (_styleMask & CPMiniaturizableWindowMask)
+            {
+                minimizeThemeSize = [self currentValueForThemeAttribute:@"minimize-image-size"];
+
+                // For retro-compatibility:
+                if (!minimizeThemeSize)
+                    minimizeThemeSize = CGSizeMake(16.0, 16.0);
+
+                [_minimizeButton setFrame:CGRectMake(minimizeThemeOrigin.x + offset, minimizeThemeOrigin.y, minimizeThemeSize.width, minimizeThemeSize.height)];
+                [_minimizeButton setAutoresizingMask:mask];
+
+                _buttonsWidth = ABS(minimizeThemeOrigin.x);
+            }
+
+            if (_buttonsWidth > 0)
+                _buttonsWidth += ABS(closeThemeOrigin.x) - closeThemeSize.width;
+        }
+        else // not win
+        {
+            if (_styleMask & CPMiniaturizableWindowMask)
+            {
+                minimizeThemeSize = [self currentValueForThemeAttribute:@"minimize-image-size"];
+
+                // For retro-compatibility:
+                if (!minimizeThemeSize)
+                    minimizeThemeSize = CGSizeMake(16.0, 16.0);
+
+                [_minimizeButton setFrame:CGRectMake(minimizeThemeOrigin.x + offset, minimizeThemeOrigin.y, minimizeThemeSize.width, minimizeThemeSize.height)];
+                [_minimizeButton setAutoresizingMask:mask];
+
+                _buttonsWidth = minimizeThemeOrigin.x + minimizeThemeSize.width;
+            }
+            else
+                zoomThemeOrigin.x -= delta2;
+
+            if (_styleMask & CPResizableWindowMask)
+            {
+                zoomThemeSize = [self currentValueForThemeAttribute:@"zoom-image-size"];
+
+                // For retro-compatibility:
+                if (!zoomThemeSize)
+                    zoomThemeSize = CGSizeMake(16.0, 16.0);
+
+                [_zoomButton setFrame:CGRectMake(zoomThemeOrigin.x + offset, zoomThemeOrigin.y, zoomThemeSize.width, zoomThemeSize.height)];
+                [_zoomButton setAutoresizingMask:mask];
+
+                _buttonsWidth = zoomThemeOrigin.x + zoomThemeSize.width;
+            }
+
+            if (_buttonsWidth > 0)
+                _buttonsWidth += closeThemeOrigin.x;
+        }
+
+        [self updateTrackingAreas];
     }
-    else
-    {
-        [[self toolbarView] setAutoresizingMask:CPViewWidthSizable];
 
-        [_headView setAutoresizingMask:CPViewWidthSizable];
-        [_dividerView setAutoresizingMask:CPViewWidthSizable];
-        [_bodyView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
+    [self _updateCloseButton];
 
-        [[[self window] contentView] setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
-    }
+    [_minimizeButton setImage:[self currentValueForThemeAttribute:@"minimize-image-button"]];
+    [_minimizeButton setAlternateImage:[self currentValueForThemeAttribute:@"minimize-image-highlighted-button"]];
+    [_zoomButton setImage:[self currentValueForThemeAttribute:@"zoom-image-button"]];
+    [_zoomButton setAlternateImage:[self currentValueForThemeAttribute:@"zoom-image-highlighted-button"]];
 }
-*/
 
 - (void)_updateCloseButton
 {
-    [_closeButton setFrameSize:[self valueForThemeAttribute:@"close-image-size"]];
-    [_closeButton setFrameOrigin:[self valueForThemeAttribute:@"close-image-origin"]];
-
     if (_isDocumentEdited)
     {
         [_closeButton setImage:[self currentValueForThemeAttribute:@"unsaved-image-button"]];
@@ -304,9 +476,15 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
     }
 }
 
+- (void)_osBehaviorDidChange:(id)application
+{
+    [self _updateWindowButtons:YES];
+}
+
 - (void)setDocumentEdited:(BOOL)isEdited
 {
     _isDocumentEdited = isEdited;
+
     [self _updateCloseButton];
 }
 
@@ -337,9 +515,10 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
         [_dividerView setHidden:enable];
     }
 
-    [_closeButton setHidden:enable];
+    [_closeButton    setHidden:enable];
     [_minimizeButton setHidden:enable];
-    [_titleField setHidden:enable];
+    [_zoomButton     setHidden:enable];
+    [_titleField     setHidden:enable];
 
     [[self window] setMovable:!enable];
 
@@ -381,28 +560,35 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
 
 - (void)layoutSubviews
 {
-    var bounds = [self bounds];
+    var width        = [self bounds].size.width,
+        mimicWindows = [CPApp shouldMimicWindows];
 
     [super layoutSubviews];
-    [self _updateCloseButton];
 
-    [_minimizeButton setImage:[self valueForThemeAttribute:@"minimize-image-button"]];
-    [_minimizeButton setAlternateImage:[self valueForThemeAttribute:@"minimize-image-highlighted-button"]];
+    if (_closeButton || _minimizeButton || _zoomButton)
+        [self _updateWindowButtons:NO];
+
     [_dividerView setBackgroundColor:[self valueForThemeAttribute:@"divider-color"]];
     [_bodyView setBackgroundColor:[self valueForThemeAttribute:@"body-color"]];
 
     [_headView setNeedsLayout];
+
+    if (width - 2 * _buttonsWidth < _minimumTitleFieldSize)
+    {
+        if (width - _buttonsWidth - _titleMargin < _minimumTitleFieldSize)
+            [_titleField setFrame:CGRectMake((mimicWindows ? _titleMargin : _buttonsWidth), 0, width - _buttonsWidth - _titleMargin, _titleBarHeight)];
+        else
+            [_titleField setFrame:CGRectMake((mimicWindows ? width - _buttonsWidth - _minimumTitleFieldSize : _buttonsWidth), 0, _minimumTitleFieldSize, _titleBarHeight)];
+    }
 }
 
 - (CGSize)_minimumResizeSize
 {
-    // The minimum width is such that the close button would always be visible.
-    // We give the same margin to the right of the button as there is to the left.
-    var size = [super _minimumResizeSize],
-        closeSize = [self valueForThemeAttribute:@"close-image-size"],
-        closeOrigin = [self valueForThemeAttribute:@"close-image-origin"];
+    // The minimum width is such that the close/minimize/zoom button(s) would always be visible.
+    // We give the same margin to the right of the button(s) as there is to the left.
+    var size = CGSizeMakeCopy([super _minimumResizeSize]);
 
-    size.width = closeSize.width + (closeOrigin.x * 2);
+    size.width = _buttonsWidth;
     size.height += _CPStandardWindowViewDividerViewHeight;
 
     return size;
@@ -413,4 +599,94 @@ var _CPStandardWindowViewDividerViewHeight = 1.0;
     return [_bodyView frame].origin.y;
 }
 
+#pragma mark -
+#pragma mark Hover management for buttons
+
+- (void)updateTrackingAreas
+{
+    if (_closeButtonTrackingArea)
+        [_closeButton removeTrackingArea:_closeButtonTrackingArea];
+
+    if (_minimizeButtonTrackingArea)
+        [_minimizeButton removeTrackingArea:_minimizeButtonTrackingArea];
+
+    if (_zoomButtonTrackingArea)
+        [_zoomButton removeTrackingArea:_zoomButtonTrackingArea];
+
+    if (_closeButton)
+    {
+        _closeButtonTrackingArea = [[CPTrackingArea alloc] initWithRect:CGRectMakeZero()
+                                                                options:CPTrackingMouseEnteredAndExited | CPTrackingActiveAlways | CPTrackingInVisibleRect
+                                                                  owner:self
+                                                               userInfo:_closeButton];
+        [_closeButton addTrackingArea:_closeButtonTrackingArea];
+    }
+
+    if (_minimizeButton)
+    {
+        _minimizeButtonTrackingArea = [[CPTrackingArea alloc] initWithRect:CGRectMakeZero()
+                                                                   options:CPTrackingMouseEnteredAndExited | CPTrackingActiveAlways | CPTrackingInVisibleRect
+                                                                     owner:self
+                                                                  userInfo:_minimizeButton];
+        [_minimizeButton addTrackingArea:_minimizeButtonTrackingArea];
+    }
+
+    if (_zoomButton)
+    {
+        _zoomButtonTrackingArea = [[CPTrackingArea alloc] initWithRect:CGRectMakeZero()
+                                                               options:CPTrackingMouseEnteredAndExited | CPTrackingActiveAlways | CPTrackingInVisibleRect
+                                                                 owner:self
+                                                              userInfo:_zoomButton];
+        [_zoomButton addTrackingArea:_zoomButtonTrackingArea];
+    }
+    
+    [super updateTrackingAreas];
+}
+
+- (void)mouseEntered:(CPEvent)anEvent
+{
+    var triggeredButton = [[anEvent trackingArea] userInfo],
+        state           = CPThemeStateHovered;
+
+    if ([CPApp shouldMimicWindows])
+        state = state.and(CPThemeStateWindowsPlatform);
+
+    if (triggeredButton === _closeButton)
+    {
+        if (_isDocumentEdited)
+            [_closeButton setImage:[self valueForThemeAttribute:@"unsaved-image-button" inState:state]];
+        else
+            [_closeButton setImage:[self valueForThemeAttribute:@"close-image-button" inState:state]];
+    }
+    else if (triggeredButton === _minimizeButton)
+    {
+        [_minimizeButton setImage:[self valueForThemeAttribute:@"minimize-image-button" inState:state]];
+    }
+    else if (triggeredButton === _zoomButton)
+    {
+        [_zoomButton setImage:[self valueForThemeAttribute:@"zoom-image-button" inState:state]];
+    }
+}
+
+- (void)mouseExited:(CPEvent)anEvent
+{
+    var triggeredButton = [[anEvent trackingArea] userInfo];
+
+    if (triggeredButton === _closeButton)
+    {
+        if (_isDocumentEdited)
+            [_closeButton setImage:[self currentValueForThemeAttribute:@"unsaved-image-button"]];
+        else
+            [_closeButton setImage:[self currentValueForThemeAttribute:@"close-image-button"]];
+    }
+    else if (triggeredButton === _minimizeButton)
+    {
+        [_minimizeButton setImage:[self currentValueForThemeAttribute:@"minimize-image-button"]];
+    }
+    else if (triggeredButton === _zoomButton)
+    {
+        [_zoomButton setImage:[self currentValueForThemeAttribute:@"zoom-image-button"]];
+    }
+}
+
 @end

AppKit/CPWindow/_CPTitleableWindowView.j

@@ -27,6 +27,9 @@
 @implementation _CPTitleableWindowView : _CPWindowView
 {
     CPTextField _titleField;
+    int         _minimumTitleFieldSize;
+    int         _titleBarHeight;
+    int         _titleMargin;
 }
 
 + (int)titleBarHeight
@@ -47,7 +50,7 @@
 
 + (CGRect)frameRectForContentRect:(CGRect)aContentRect
 {
-    var frameRect = CGRectMakeCopy(aContentRect),
+    var frameRect = [super frameRectForContentRect:aContentRect],
         titleBarHeight = [self titleBarHeight];
 
     frameRect.origin.y -= titleBarHeight;
@@ -62,15 +65,19 @@
 
     if (self)
     {
+        // We cache some values for optimization
+        _titleBarHeight = [[self class] titleBarHeight];
+        _titleMargin    = [self currentValueForThemeAttribute:@"title-margin"];
+
         _titleField = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
 
         [_titleField setHitTests:NO];
         [_titleField setStringValue:@"Untitled"];
         [_titleField sizeToFit];
         [_titleField setAutoresizingMask:CPViewWidthSizable];
-        [_titleField setStringValue:@""];
+        [self setTitle:@""];
 
-        [_titleField setFrame:CGRectMake(20.0, 3.0, CGRectGetWidth([self bounds]) - 40.0, CGRectGetHeight([_titleField frame]))];
+        [_titleField setFrame:CGRectMake(_titleMargin, 3.0, CGRectGetWidth([self bounds]) - 2 * _titleMargin, CGRectGetHeight([_titleField frame]))];
 
         [self addSubview:_titleField];
 
@@ -83,6 +90,8 @@
 - (void)setTitle:(CPString)aTitle
 {
     [_titleField setStringValue:aTitle];
+
+    _minimumTitleFieldSize = [_titleField _minimumFrameSize].width;
 }
 
 - (void)tile
@@ -95,7 +104,7 @@
 
     // The vertical alignment of the title is set by the theme, so just give it all available space. By default
     // the title will vertically centre within.
-    [_titleField setFrame:CGRectMake(20.0, 0, width - 40.0, [[self class] titleBarHeight])];
+    [_titleField setFrame:CGRectMake(_titleMargin, 0, width - 2 * _titleMargin, _titleBarHeight)];
 }
 
 - (void)layoutSubviews

AppKit/CPWindow/_CPToolTipWindowView.j

@@ -25,8 +25,8 @@
 
 @implementation _CPToolTipWindowView : _CPWindowView
 {
-    BOOL            _mouseDownPressed   @accessors(getter=isMouseDownPressed, setter=setMouseDownPressed:);
-    unsigned        _gravity            @accessors(property=gravity);
+    BOOL        _mouseDownPressed   @accessors(getter=isMouseDownPressed, setter=setMouseDownPressed:);
+    unsigned    _gravity            @accessors(property=gravity);
 }
 
 
@@ -41,21 +41,30 @@
 + (CPDictionary)themeAttributes
 {
     return @{
-            @"stroke-color": [CPColor colorWithHexString:@"E3E3E3"],
-            @"background-color": [CPColor colorWithHexString:@"FFFFCA"],
-            @"border-radius": 2.0,
-            @"stroke-width": 1.0,
-            @"color": [CPColor blackColor],
-        };
+        // 1. The DOM-based CSS rendering attributes. 
+        // _CPWindowView will natively apply this to the outer window bounds.
+        @"bezel-color":[CPColor colorWithCSSDictionary:@{
+            @"background-color": @"#FFFFCA",
+            @"border": @"1px solid #B0B0B0",
+            @"border-radius": @"2px",
+            @"box-sizing": @"border-box",
+            @"box-shadow": @"0px 1px 3px rgba(0,0,0,0.25)"
+        }],
+        @"color": [CPColor blackColor],
+        
+        // 2. Legacy attributes zeroed out to satisfy the build process/theme inheritance
+        @"background-color": [CPColor clearColor],
+        @"stroke-color": [CPColor clearColor],
+        @"stroke-width": 0.0,
+        @"border-radius": 0.0
+    };
 }
 
-/*! compute the contentView frame from a given window frame
-    @param aFrameRect the window frame
-*/
 + (CGRect)contentRectForFrameRect:(CGRect)aFrameRect
 {
     var contentRect = [super contentRectForFrameRect:aFrameRect];
 
+    // This pushes the text inwards so it doesn't touch the outer CSS border
     contentRect.origin.x += 3;
     contentRect.origin.y += 3;
     contentRect.size.width -= 6;
@@ -64,50 +73,34 @@
     return contentRect;
 }
 
-/*! compute the window frame from a given contentView frame
-    @param aContentRect the contentView frame
-*/
 + (CGRect)frameRectForContentRect:(CGRect)aContentRect
 {
     var aFrameRect = CGRectMakeCopy(aContentRect);
 
     aFrameRect.origin.x -= 3;
     aFrameRect.origin.y -= 3;
-    aFrameRect.size.width += 6;
-    aFrameRect.size.height += 6;
+    aFrameRect.size.width += 9;
+    aFrameRect.size.height += 9;
 
     return aFrameRect;
 }
 
-
 // MARK: -
 // MARK: drawing
 
+- (void)layoutSubviews
+{
+    [super layoutSubviews];
+    
+    // Apply the CSS dictionary to the standard CPView subview (contentView).
+    // This bypasses the _CPWindowView canvas interceptor and applies directly to the DOM.
+
+    [self setBackgroundColor:[self currentValueForThemeAttribute:@"bezel-color"]];
+}
+
 - (void)drawRect:(CGRect)aRect
 {
-    [super drawRect:aRect];
-
-    var context = [[CPGraphicsContext currentContext] graphicsPort],
-        radius = [self currentValueForThemeAttribute:@"border-radius"],
-        strokeWidth = [self currentValueForThemeAttribute:@"stroke-width"],
-        strokeColor = [self currentValueForThemeAttribute:@"stroke-color"],
-        bgColor = [self currentValueForThemeAttribute:@"background-color"];
-
-    CGContextSetStrokeColor(context, strokeColor);
-    CGContextSetFillColor(context, bgColor);
-    CGContextSetLineWidth(context, strokeWidth);
-
-    aRect.origin.x += strokeWidth;
-    aRect.origin.y += strokeWidth;
-    aRect.size.width -= strokeWidth * 2;
-    aRect.size.height -= strokeWidth * 2;
-
-    var path = CGPathWithRoundedRectangleInRect(aRect, radius, radius, YES, YES, YES, YES);
-    CGContextAddPath(context, path);
-    CGContextStrokePath(context);
-
-    CGContextAddPath(context, path);
-    CGContextFillPath(context);
+    // Intentionally empty to disable legacy Canvas drawing.
 }
 
 @end

AppKit/Jakefile

@@ -61,6 +61,9 @@ task ("Theme", [$BUILD_CJS_CAPPUCCINO_APPKIT], function()
 
     utilsFile.cp_r(path.join($BUILD_DIR, $CONFIGURATION, 'Aristo2.blend'), path.join($BUILD_PATH, 'Resources', 'Aristo2.blend'));
     utilsFile.cp_r(path.join($BUILD_DIR, $CONFIGURATION, 'Aristo2.blend'), path.join($BUILD_CJS_CAPPUCCINO_APPKIT, "Resources", "Aristo2.blend"));
+
+    utilsFile.cp_r(path.join($BUILD_DIR, $CONFIGURATION, 'Aristo3.blend'), path.join($BUILD_PATH, 'Resources', 'Aristo3.blend'));
+    utilsFile.cp_r(path.join($BUILD_DIR, $CONFIGURATION, 'Aristo3.blend'), path.join($BUILD_CJS_CAPPUCCINO_APPKIT, "Resources", "Aristo3.blend"));
 });
 
 task ("build", ["AppKit", $BUILD_CJS_CAPPUCCINO_APPKIT, "Theme"]);

AppKit/Themes/Aristo3/Aristo3Colors.j

@@ -0,0 +1,163 @@
+/*
+ * Aristo3Colors.j
+ * AppKit
+ *
+ * Created by Didier Korthoudt
+ * Copyright 2018 <didier.korthoudt@uliege.be>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+
+A3CPColorActiveText                 = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.85];
+A3CPColorActiveTextHighlighted      = [CPColor colorWithRed:255 green:255 blue:255 alpha:0.90];
+A3CPColorInactiveText               = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.30];
+A3CPColorInactiveWhiteText          = [CPColor colorWithRed: 255 green:255 blue:255 alpha:0.6];
+A3CPColorDefaultText                = [CPColor colorWithHexString:@"FFFFFF"];
+A3CPColorActiveText65               = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.65];
+
+A3CPColorBlack50                    = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.50];
+A3CPColorBlack85                    = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.85];
+A3CPColorBlack25                    = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.25];
+
+A3CPColorActiveBorder               = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.20];
+A3ColorActiveBorder                 = @"rgba(0,0,0,0.20)";
+A3CPColorInactiveBorder             = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.10];
+A3ColorInactiveBorder               = @"rgba(0,0,0,0.10)";
+A3ColorInactiveDarkBorder           = @"rgba(0,0,0,0.25)";
+A3ColorNotKeyDarkBorder             = @"rgba(0,0,0,0.85)";
+A3ColorTransparent                  = @"rgba(0,0,0,0)";
+A3ColorLightBackground              = @"rgba(255,255,255,0.5)";
+
+A3ColorBorderLight                  = @"rgb(230,230,230)";
+A3ColorBorderMedium                 = @"rgb(213,213,213)";
+A3ColorBorderDark                   = @"rgb(205,205,205)";
+A3ColorBorderBlue                   = @"rgb(23,128,251)";
+A3CPColorBorderBlue                 = [CPColor colorWithHexString:@"1780FB"];
+A3CPColorBorderBlueInactive         = [CPColor colorWithHexString:@"DCDCDC"];
+A3ColorBorderBlueLight              = @"rgb(150,200,250)";
+A3ColorBorderBlueHighlighted        = @"rgb(0,103,216)";
+A3ColorBackground                   = @"rgb(236,236,236)";
+A3ColorBackgroundInactive           = @"rgb(240,240,240)";
+A3ColorBackgroundHighlighted        = @"rgb(231,231,231)";
+A3ColorBackgroundWhite              = @"rgb(255,255,255)";
+A3ColorBackgroundDark               = @"rgb(159,159,159)";
+A3ColorBackgroundDarkened           = @"rgba(0,0,0,0.15)";
+A3ColorBackgroundLightlyDarkened    = @"rgba(0,0,0,0.05)";
+A3ColorButtonBackgroundHighlighted  = @"rgb(191,191,191)";
+A3ColorBackground90                 = @"rgba(236,236,236,0.90)";
+A3ColorBackground50                 = @"rgba(236,236,236,0.50)";
+A3ColorButtonBackgroundHighlighted80= @"rgba(191,191,191,0.80)";
+A3ColorButtonBackgroundHighlighted50= @"rgba(191,191,191,0.50)";
+A3ColorBackgroundDark35             = @"rgba(159,159,159,0.35)";
+A3ColorBackgroundBlack50            = @"rgba(0,0,0,0.50)";
+A3ColorBackgroundBlack35            = @"rgba(0,0,0,0.35)";
+A3ColorBackgroundBlack20            = @"rgba(0,0,0,0.20)";
+A3ColorBackgroundBlack14            = @"rgba(0,0,0,0.14)";
+
+A3ColorBorderRed                    = @"rgb(192,26,25)";
+A3ColorBorderRedLight               = @"rgb(239,102,103)";
+A3ColorBorderRedHighlighted         = @"rgb(144,19,19)";
+
+// Windows
+
+A3ColorWindowHeadActive             = @"rgb(216,216,216)";
+A3ColorWindowHeadInactive           = @"rgb(246,246,246)";
+A3ColorWindowButtonClose            = @"rgb(252,96,92)";
+A3ColorWindowButtonCloseDark        = @"rgb(223,72,69)";
+A3ColorWindowButtonCloseLight       = @"rgb(254,176,174)";
+A3ColorWindowButtonMin              = @"rgb(253,188,64)";
+A3ColorWindowButtonMinDark          = @"rgb(222,160,52)";
+A3ColorWindowButtonMinLight         = @"rgb(254,222,160)";
+A3ColorWindowButtonZoom             = @"rgb(52,200,74)";
+A3ColorWindowButtonZoomDark         = @"rgb(40,171,53)";
+A3ColorWindowButtonZoomLight        = @"rgb(154,227,164)";
+A3ColorWindowButtonUnsaved          = @"rgba(50,50,50,0.65)";
+A3ColorWindowButtonUnsavedLight     = @"rgb(100,100,100)";
+A3ColorWindowButtonBackground       = @"rgb(128,128,128)";
+A3ColorWindowButtonBackgroundLight  = @"rgb(192,192,192)";
+A3ColorWindowButtonBackgroundDark   = @"rgb(96,96,96)";
+A3ColorWindowBorder                 = @"rgb(189,189,189)";
+
+// Menus
+
+A3ColorMenuLightBackground          = @"rgb(246,246,246)";
+A3ColorMenuBackground               = @"rgb(206,206,206)";
+A3ColorMenuCheckmark                = @"rgba(0,0,0,0.85)";
+A3ColorMenuBorder                   = @"rgba(0,0,0,0.20)";
+
+// Textfields
+
+A3ColorTextfieldActiveBorder        = @"rgba(0,0,0,0.25)";
+A3ColorTextfieldInactiveBorder      = @"rgba(0,0,0,0.20)";
+
+// Tables
+
+A3CPColorTableRow                   = [CPColor whiteColor];
+A3CPColorTableAlternateRow          = [CPColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0];
+A3CPColorTableDivider               = [CPColor colorWithRed:214.0/255.0 green:214.0/255.0 blue:214.0/255.0 alpha:1.0];
+A3ColorTableDivider                 = @"rgb(214,214,214)";
+A3ColorTableHeaderSeparator         = @"rgb(229,229,229)";
+A3CPColorTableHeaderText            = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.40];
+A3CPColorSelectedTableHeaderText    = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.70];
+A3ColorTableColumnHeaderPressed     = @"rgba(0,0,0,0.10)";
+
+// Scrollers
+
+A3ColorScrollerDark                 = @"rgba(0,0,0,0.50)";
+A3ColorScrollerLight                = @"rgba(255,255,255,0.5)";
+A3ColorScrollerLegacy               = @"rgba(0,0,0,0.20)";
+A3ColorScrollerBackground           = @"rgb(250,250,250)";
+A3ColorScrollerBorder               = @"rgb(232,232,232)";
+
+// Sliders
+
+A3ColorCircularSliderKnob           = @"rgba(0,0,0,0.5)";
+A3ColorSliderDisabledKnob           = @"rgb(251,251,251)";
+A3ColorSliderDisabledTrack          = @"rgb(140,140,140)";
+
+// Steppers
+
+A3ColorStepperArrow                 = @"rgba(0,0,0,0.65)";
+A3ColorHighlightedStepperArrow      = @"rgba(255,255,255,1)";
+
+// Split views
+
+A3ColorSplitPaneDividerBackground   = @"rgb(253,253,253)";
+A3ColorSplitPaneDividerBorder       = @"rgb(213,213,213)";
+
+// Calendar
+
+A3ColorCalendarButtons              = @"rgb(50,50,50)";
+A3ColorCalendarHighlightedButtons   = @"rgb(165,165,165)";
+A3CPColorCalendarDark               = [CPColor colorWithRed:0 green:0 blue:0 alpha:0.35];
+A3ColorCalendarDark                 = @"rgba(0,0,0,0.35)";
+A3ColorCalendarActive               = A3ColorBorderBlue;
+A3ColorCalendarActiveNotKey         = @"rgba(0,0,0,0.15)";
+A3CPColorCalendarTitle              = [CPColor colorWithRed:65/255 green:65/255  blue:65/255  alpha:1];
+A3CPColorCalendarTile               = A3CPColorActiveText; // [CPColor colorWithRed:40/255 green:40/255  blue:40/255  alpha:1];
+A3CPColorCalendarCurrentDayTile     = A3CPColorBorderBlue;
+A3CPColorCalendarOutOfRangeTile     = A3CPColorInactiveText;
+A3CPColorCalendarSelectedTile       = [CPColor whiteColor];
+A3ColorCalendarBackground           = @"rgb(255,255,255)";
+
+// Disclosure triangle
+
+A3ColorDisclosure                   = @"rgb(140,140,140)";
+A3ColorDisclosureDisabled           = @"rgb(191,191,191)";
+A3ColorDisclosurePushed             = @"rgb(115,115,115)";
+
+// Square buttons
+
+A3ColorSquareButtonBackground       = @"rgb(248,248,248)";

AppKit/Themes/Aristo3/Info.plist

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CPSystemFontFace</key>
+	<string>SFNSText, Helvetica Neue</string>
+	<key>CPApplicationDelegateClass</key>
+	<string>BKShowcaseController</string>
+	<key>CPBundleName</key>
+	<string>Aristo3</string>
+	<key>BKLearnMoreURL</key>
+	<string>http://cappuccino.org/aristo</string>
+	<key>BKLearnMoreButtonTitle</key>
+	<string>Aristo Home Page</string>
+	<key>CPPrincipalClass</key>
+	<string>CPApplication</string>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
+	<key>CPSystemFontSize</key>
+	<string>13</string>
+</dict>
+</plist>

AppKit/Themes/Aristo3/Jakefile

@@ -0,0 +1,40 @@
+require("../../../common.jake");
+
+const path = require("path");
+
+var callback;
+
+function callbackFunction(blendtask) {
+    callback(blendtask);
+}
+
+$BUILD_CJS_BLENDTASK = path.join($BUILD_CJS_CAPPUCCINO, "lib", "cappuccino", "jake", "blendtask.j");
+
+var promise = new Promise((resolve, reject) => {
+    callback = function(BLEND_TASK) {
+        exports.BlendTask = BLEND_TASK.BlendTask;
+        exports.blend = BLEND_TASK.blend;
+        defineBlendTask().then(() => {
+            resolve();
+            delete exports.jakePromise;
+        });
+    }
+});
+
+require("../../../CommonJS/lib/cappuccino/jake.js").initilize(callbackFunction);
+
+
+async function defineBlendTask() {
+    await exports.blend ("Aristo3.blend", function(aristoTask)
+    {
+        aristoTask.setBuildIntermediatesPath(path.join($BUILD_DIR, "Aristo3.build", $CONFIGURATION))
+        aristoTask.setBuildPath(path.join($BUILD_DIR, $CONFIGURATION));
+
+        aristoTask.setThemeDescriptors(new FileList("ThemeDescriptors.j"));
+        aristoTask.setIdentifier("com.280n.blend.Aristo3");
+        aristoTask.setResources(new FileList("Resources/*"));
+    });
+    task ("build", ["Aristo3.blend"]);
+}
+
+exports.jakePromise = promise;

AppKit/Themes/Aristo3/LICENSE

@@ -0,0 +1,28 @@
+Copyright (c) 2015, Alcatel-Lucent Inc.
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of monolithe nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

AppKit/Themes/Aristo3/index-debug.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html
+    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!--
+ index-debug.html
+ null
+
+ Created by You on December 12, 2012
+ Copyright 2012, Your Company. All rights reserved.
+-->
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+        <link rel="apple-touch-icon" href="Resources/icon.png" />
+        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+
+        <title>Aristo 3</title>
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+	</script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            body{margin:0; padding:0;}
+            #container {position: absolute; top:50%; left:50%;}
+            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
+            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
+            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            
+            @font-face {
+                font-family: 'SFNSText';
+                src: local(".SFNSText-Light"), url("Resources/fonts/SFNSText-Light.woff") format("woff");
+                font-weight: 300
+            }
+            @font-face {
+                font-family: 'SFNSText';
+                src: local(".SFNSText-Medium"), url("Resources/fonts/SFNSText-Medium.woff") format("woff");
+                font-weight: 500
+            }
+            @font-face {
+                font-family: 'SFNSDisplay';
+                src: local(".SFNSDisplay-Light"), url("Resources/fonts/SFNSDisplay-Light.woff") format("woff");
+                font-weight: 300
+            }
+            @font-face {
+                font-family: 'SFNSDisplay';
+                src: local(".SFNSDisplay-Medium"), url("Resources/fonts/SFNSDisplay-Medium.woff") format("woff");
+                font-weight: 500
+            }
+            @font-face {
+                font-family: 'SFNSText';
+                src: local(".SFNSText"), url("Resources/fonts/SFNSText-Regular.woff") format("woff");
+                font-weight: 400
+            }
+            @font-face {
+                font-family: 'SFNSText';
+                src: local(".SFNSText-Bold"), url("Resources/fonts/SFNSText-Bold.woff") format("woff");
+                font-weight: 600
+            }
+            @font-face {
+                font-family: 'SFNSDisplay';
+                src: local(".SFNSDisplay"), url("Resources/fonts/SFNSDisplay-Regular.woff") format("woff");
+                font-weight: 400
+            }
+            @font-face {
+                font-family: 'SFNSDisplay';
+                src: local(".SFNSDisplay-Bold"), url("Resources/fonts/SFNSDisplay-Bold.woff") format("woff");
+                font-weight: 600
+            }
+        </style>
+
+        <!--[if lt IE 7]>
+        <STYLE type="text/css">
+            #container { position: relative; top: 50%; }
+            #content { position: relative;}
+        </STYLE>
+        <![endif]-->
+
+    </head>
+
+    <body style="">
+        <div id="cappuccino-body">
+            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
+                <script type="text/javascript">
+                    document.write("<div id='container'><p id='content'>" +
+                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
+                                   "Loading Aristo 3...</p></div>");
+                </script>
+
+                <noscript>
+                    <div id="container">
+                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
+                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
+                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
+                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
+                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
+                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
+                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
+                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
+                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
+                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </noscript>
+            </div>
+        </div>
+    </body>
+
+</html>
+

AppKit/Themes/Aristo3/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html
+    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!--
+ index.html
+ null
+
+ Created by You on December 12, 2012
+ Copyright 2012, Your Company. All rights reserved.
+-->
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+        <link rel="apple-touch-icon" href="Resources/icon.png" />
+        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+
+        <title>Aristo 2</title>
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            body{margin:0; padding:0;}
+            #container {position: absolute; top:50%; left:50%;}
+            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
+            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
+            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        </style>
+
+        <!--[if lt IE 7]>
+        <STYLE type="text/css">
+            #container { position: relative; top: 50%; }
+            #content { position: relative;}
+        </STYLE>
+        <![endif]-->
+
+    </head>
+
+    <body style="">
+        <div id="cappuccino-body">
+            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
+                <script type="text/javascript">
+                    document.write("<div id='container'><p id='content'>" +
+                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
+                                   "Loading Aristo 3...</p></div>");
+                </script>
+
+                <noscript>
+                    <div id="container">
+                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
+                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
+                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
+                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
+                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
+                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
+                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
+                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
+                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
+                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </noscript>
+            </div>
+        </div>
+    </body>
+
+</html>

AppKit/Themes/Aristo3/main.j

@@ -0,0 +1,19 @@
+/*
+ * main.j
+ * null
+ *
+ * Created by You on December 12, 2012
+ * Copyright 2012, Your Company. All rights reserved.
+ */
+
+@import <Foundation/Foundation.j>
+@import <AppKit/AppKit.j>
+@import <BlendKit/BlendKit.j>
+
+@import "ThemeDescriptors.j"
+
+
+function main(args, namedArgs)
+{
+    CPApplicationMain(args, namedArgs);
+}

AppKit/Themes/Jakefile

@@ -1,3 +1,3 @@
 require("../../common.jake");
 
-subtasks(["BlendKit", "CommonJS", "Aristo", "Aristo2"], ["build", "clean", "clobber"]);
+subtasks(["BlendKit", "CommonJS", "Aristo", "Aristo2", "Aristo3"], ["build", "clean", "clobber"]);

AppKit/_CPCornerView.j

@@ -44,6 +44,9 @@
     var context = [[CPGraphicsContext currentContext] graphicsPort],
         color = [self currentValueForThemeAttribute:@"divider-color"];
 
+    if (!color)
+        return;
+
     CGContextSetLineWidth(context, 1);
     CGContextSetStrokeColor(context, [self currentValueForThemeAttribute:@"divider-color"]);
 

AppKit/_CPPopUpList.j

@@ -248,6 +248,10 @@ var ListColumnIdentifier = @"1";
         [[_panel contentView] addSubview:_scrollView];
         [_panel setInitialFirstResponder:_tableView];
 
+        // Ensure table is transparent in HUD mode so Panel background shows through
+        if ([_dataSource respondsToSelector:@selector(hasThemeState:)] && [_dataSource hasThemeState:CPThemeStateHUD])
+            [_tableView setBackgroundColor:[CPColor clearColor]];
+
         if ([_dataSource numberOfItemsInList:self] > 0)
             [_tableView selectRowIndexes:[CPIndexSet indexSetWithIndex:0] byExtendingSelection:NO];
         else
@@ -264,12 +268,36 @@ var ListColumnIdentifier = @"1";
 {
     var panel = [[_CPPopUpPanel alloc] initWithContentRect:aFrame styleMask:CPBorderlessWindowMask];
 
+    // HUD Theme Styling
+    if ([_dataSource respondsToSelector:@selector(hasThemeState:)] && [_dataSource hasThemeState:CPThemeStateHUD])
+    {
+        // hack to set the HUD background mask to the panel but using the standard WindowView class (not the HUD one).
+        panel._styleMask |= CPHUDBackgroundWindowMask;
+
+        // Create the custom HUD background with dark fill, light border, and shadow
+        var hudBackgroundColor = [CPColor colorWithCSSDictionary:@{
+            @"background-color": @"rgba(30, 30, 30, 0.95)",
+            @"border-color": @"rgba(255, 255, 255, 0.3)",
+            @"border-style": @"solid",
+            @"border-width": @"1px",
+            @"border-radius": @"6px",
+            @"box-shadow": @"0 5px 15px rgba(0,0,0,0.6)",
+            @"box-sizing": @"border-box"
+        }];
+
+        [panel setBackgroundColor:hudBackgroundColor];
+    }
+    else
+    {
+        // Standard Styling
+        [panel setHasShadow:YES];
+        [panel setShadowStyle:CPMenuWindowShadowStyle];
+    }
+
     [panel setTitle:@""];
     [panel setFloatingPanel:YES];
     [panel setBecomesKeyOnlyIfNeeded:YES];
     [panel setLevel:CPPopUpMenuWindowLevel];
-    [panel setHasShadow:YES];
-    [panel setShadowStyle:CPMenuWindowShadowStyle];
     [panel setDelegate:self];
 
     return panel;
@@ -313,7 +341,12 @@ var ListColumnIdentifier = @"1";
 {
     var scroll = [[CPScrollView alloc] initWithFrame:aFrame];
 
-    [scroll setBorderType:CPLineBorder];
+    // Remove border for HUD to avoid double borders (Window Border + ScrollView Border)
+    if ([_dataSource respondsToSelector:@selector(hasThemeState:)] && [_dataSource hasThemeState:CPThemeStateHUD])
+        [scroll setBorderType:CPNoBorder];
+    else
+        [scroll setBorderType:CPLineBorder];
+
     [scroll setAutohidesScrollers:NO];
     [scroll setHasVerticalScroller:YES];
     [scroll setHasHorizontalScroller:NO];

AppKit/_CPToolTip.j

@@ -118,13 +118,9 @@ var _CPToolTipHeight = 24.0,
         textFrameSizeSingleLine = [aText sizeWithFont:font],
         textFrameSize = [aText sizeWithFont:font inWidth:(aToolTipSize.width)];
 
-    // this small adjustement fixes
-    // tooltips wrapping issues from fractional pixels.
     textFrameSizeSingleLine.width += 1;
     textFrameSize.width += 1;
 
-
-    // If the text fully fits within the maximum width, shrink to fit.
     if (textFrameSizeSingleLine.width < aToolTipSize.width)
     {
         var textField = [[CPTextField alloc] initWithFrame:CGRectMakeZero()],
@@ -137,7 +133,14 @@ var _CPToolTipHeight = 24.0,
     if (textFrameSize.height < 100)
     {
         aToolTipSize.height = textFrameSize.height + 4;
-        return [aToolTipSize, textFrameSize];
+        
+        // FIX: Snap to whole pixels
+        aToolTipSize.width = CEIL(aToolTipSize.width);
+        aToolTipSize.height = CEIL(aToolTipSize.height);
+        textFrameSize.width = CEIL(textFrameSize.width);
+        textFrameSize.height = CEIL(textFrameSize.height);
+        
+        return[aToolTipSize, textFrameSize];
     }
 
     var newWidth        = aToolTipSize.width + ((parseInt(textFrameSize.height - 100) / _CPToolTipHeight) * _CPToolTipHeight);
@@ -145,6 +148,12 @@ var _CPToolTipHeight = 24.0,
     aToolTipSize.width  = newWidth + 2;
     aToolTipSize.height = textFrameSize.height + 4;
 
+    // FIX: Snap to whole pixels
+    aToolTipSize.width = CEIL(aToolTipSize.width);
+    aToolTipSize.height = CEIL(aToolTipSize.height);
+    textFrameSize.width = CEIL(textFrameSize.width);
+    textFrameSize.height = CEIL(textFrameSize.height);
+
     return [aToolTipSize, textFrameSize];
 }
 
@@ -200,6 +209,12 @@ var _CPToolTipHeight = 24.0,
         [self setLevel:CPStatusWindowLevel];
         [self setAlphaValue:0.9];
 
+        if ([_toolTipWindow styleMask] & CPHUDBackgroundWindowMask)
+        {
+            [_content setThemeState:CPThemeStateHUD];
+            [_windowView setThemeState:CPThemeStateHUD];
+       }
+
         [_windowView setNeedsDisplay:YES];
 
     }

Tests/AppKit/CPScrollViewTest.j

@@ -317,24 +317,6 @@
     [self assertFalse:hasScrolled];
 }
 
--(void)testNotificationsRegistered
-{
-    var scrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)],
-        theWindow = [[CPWindow alloc] initWithContentRect:CGRectMake(0.0, 0.0, 1024.0, 768.0)
-                                                styleMask:CPWindowNotSizable];
-
-    [self assert:[CPNotificationCenterHelper registeredNotificationsForObserver:scrollView] equals:[] message:@"Notications registered for the scrollView in the notification center are wrong -1-"];
-
-    [[theWindow contentView] addSubview:scrollView];
-    [self assert:[CPNotificationCenterHelper registeredNotificationsForObserver:scrollView] equals:[@"CPScrollerStyleGlobalChangeNotification", @"_CPWindowDidChangeFirstResponderNotification"] message:@"Notications registered for the scrollView in the notification center are wrong -2-"];
-
-    [[theWindow contentView] addSubview:scrollView];
-    [self assert:[CPNotificationCenterHelper registeredNotificationsForObserver:scrollView] equals:[@"CPScrollerStyleGlobalChangeNotification", @"_CPWindowDidChangeFirstResponderNotification"] message:@"Notications registered for the scrollView in the notification center are wrong -3-"];
-
-    [scrollView removeFromSuperview];
-    [self assert:[CPNotificationCenterHelper registeredNotificationsForObserver:scrollView] equals:[] message:@"Notications registered for the scrollView in the notification center are wrong -4-"];
-}
-
 - (void)testDocumentVisibleRect
 {
     var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMake(0.0, 0.0, 1024.0, 768.0)
@@ -361,6 +343,39 @@
     [self assertRect:CGRectMake(80, 80, 200, 200) equals:[aScrollView documentVisibleRect] message:@"documentVisibleRect is wrong in CPScrollView"];
 }
 
+- (void)testSetGlobalScrollerStyle
+{
+    // In this test, we set global scroller style to legacy, we create a scroll view, change global scroller style to overlay BEFORE placing the
+    // scroll view in the view hierarchy, then we insert the scroll view in the view hierarchy and it should then have overlay as scroller style.
+
+    [CPScrollView setGlobalScrollerStyle:CPScrollerStyleLegacy];
+
+    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMake(0.0, 0.0, 1024.0, 768.0)
+                                                styleMask:CPWindowNotSizable],
+        windowView    = [theWindow contentView],
+        aScrollView   = [[CPScrollView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)],
+        aDocumentView = [[CPView alloc]       initWithFrame:CGRectMake(0, 0, 200, 200)];
+
+    [CPScrollView setGlobalScrollerStyle:CPScrollerStyleOverlay];
+
+    [aScrollView setDocumentView:aDocumentView];
+    [windowView addSubview:aScrollView];
+
+    [self assert:CPScrollerStyleOverlay equals:[aScrollView scrollerStyle] message:@"Global scroller style was not applied to this CPScrollView"];
+
+    // In this test, we have global scroller style set to overlay. We create a scroll view, set the scroller style to legacy BEFORE placing the
+    // scroll view in the view hierarchy, then insert it. It should have legacy as scroller style.
+
+    var anotherScrollView   = [[CPScrollView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)],
+        anotherDocumentView = [[CPView alloc]       initWithFrame:CGRectMake(0, 0, 200, 200)];
+
+    [anotherScrollView setScrollerStyle:CPScrollerStyleLegacy];
+    [anotherScrollView setDocumentView:anotherDocumentView];
+    [windowView addSubview:anotherScrollView];
+
+    [self assert:CPScrollerStyleLegacy equals:[anotherScrollView scrollerStyle] message:@"Specific scroller style was overrided by global scroller style"];
+}
+
 - (void)assertPoint:(CGPoint)expected equals:(CGPoint)actual message:(CPString)message
 {
     [self assert:expected.x equals:actual.x message:@"X: " + message];

Tests/AppKit/CPTableViewTest.j

@@ -528,7 +528,7 @@
         {
             [self assertTrue:[dataView hasThemeState:CPThemeStateTableDataView] message:"CPThemeStateTableDataView should be enabled"];
             [self assertFalse:[dataView hasThemeState:CPThemeStateSelectedDataView] message:"CPThemeStateSelectedDataView should be disabled"];
-            [self assertTrue:[dataView hasThemeState:CPThemeStateFirstResponder] message:"CPThemeStateFirstResponder should be enabled"];
+            //[self assertTrue:[dataView hasThemeState:CPThemeStateFirstResponder] message:"CPThemeStateFirstResponder should be enabled"];
         }
 
         enumerateViewsInRowsCall++;
@@ -548,7 +548,7 @@
         {
             [self assertTrue:[dataView hasThemeState:CPThemeStateTableDataView] message:"CPThemeStateTableDataView should be enabled"];
             [self assertFalse:[dataView hasThemeState:CPThemeStateSelectedDataView] message:"CPThemeStateSelectedDataView should be disabled"];
-            [self assertTrue:[dataView hasThemeState:CPThemeStateFirstResponder] message:"CPThemeStateFirstResponder should be enabled"];
+            // [self assertTrue:[dataView hasThemeState:CPThemeStateFirstResponder] message:"CPThemeStateFirstResponder should be enabled"];
         }
     }];
 
@@ -740,6 +740,10 @@
 {
     return acceptsFirstResponder;
 }
+- (BOOL)_isFocused
+{
+    return [[self window] firstResponder] === self;
+}
 
 @end
 

Tests/Manual/CPAlertTest/AppController.j

@@ -51,7 +51,7 @@
 {
     [self _init];
 
-    theWindow = [[CPWindow alloc] initWithContentRect:CGRectMake(100, 100, 500, 500) styleMask:CPTitledWindowMask];
+    theWindow = [[CPWindow alloc] initWithContentRect:CGRectMake(100, 100, 500, 500) styleMask:CPTitledWindowMask]; //  | CPHUDBackgroundWindowMask
     [theWindow setTitle:@"CPAlert Test"];
 
     var contentView = [theWindow contentView];

Tests/Manual/CPButtonTest/Info.plist

@@ -2,9 +2,11 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-    <key>Main cib file base name</key>
-    <string>MainMenu.cib</string>
-    <key>CPBundleName</key>
-    <string>CPButton</string>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
+	<key>Main cib file base name</key>
+	<string>MainMenu.cib</string>
+	<key>CPBundleName</key>
+	<string>CPButton</string>
 </dict>
-</plist>
+</plist>

Tests/Manual/CPButtonTest/Resources/MainMenu.xib

@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="10109" systemVersion="15D21" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="23727" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="10109"/>
-        <capability name="box content view" minToolsVersion="7.0"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="23727"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <customObject id="-2" userLabel="File's Owner" customClass="NSApplication">
@@ -11,17 +11,17 @@
             </connections>
         </customObject>
         <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
-        <customObject id="-3" userLabel="Application"/>
+        <customObject id="-3" userLabel="Application" customClass="NSObject"/>
         <window title="CPButton Image Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" releasedWhenClosed="NO" animationBehavior="default" id="371">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="200" y="500" width="380" height="253"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" id="372">
                 <rect key="frame" x="0.0" y="0.0" width="380" height="253"/>
                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                 <subviews>
-                    <textField verticalHuggingPriority="750" id="1148">
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1148">
                         <rect key="frame" x="40" y="24" width="101" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Image Position:" id="1149">
@@ -30,12 +30,12 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <popUpButton verticalHuggingPriority="750" id="1150">
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1150">
                         <rect key="frame" x="140" y="16" width="207" height="26"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <popUpButtonCell key="cell" type="push" title="No Image" bezelStyle="rounded" alignment="left" lineBreakMode="truncatingTail" state="on" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" selectedItem="1153" id="1151">
                             <behavior key="behavior" lightByBackground="YES" lightByGray="YES"/>
-                            <font key="font" metaFont="system"/>
+                            <font key="font" metaFont="message"/>
                             <menu key="menu" title="OtherViews" id="1152">
                                 <items>
                                     <menuItem title="No Image" state="on" id="1153"/>
@@ -52,11 +52,11 @@
                             <action selector="setImagePosition:" target="450" id="1180"/>
                         </connections>
                     </popUpButton>
-                    <customView id="1182" customClass="BezelView">
+                    <customView fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1182" customClass="BezelView">
                         <rect key="frame" x="20" y="59" width="340" height="174"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <subviews>
-                            <button verticalHuggingPriority="750" id="1130">
+                            <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1130">
                                 <rect key="frame" x="24" y="133" width="96" height="25"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <buttonCell key="cell" type="roundTextured" title="Button" bezelStyle="texturedRounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1131">
@@ -64,7 +64,7 @@
                                     <font key="font" metaFont="system"/>
                                 </buttonCell>
                             </button>
-                            <button verticalHuggingPriority="750" id="1132">
+                            <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1132">
                                 <rect key="frame" x="143" y="133" width="176" height="25"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <buttonCell key="cell" type="roundTextured" title="Button With Image" bezelStyle="texturedRounded" imagePosition="left" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1133">
@@ -72,7 +72,7 @@
                                     <font key="font" metaFont="system"/>
                                 </buttonCell>
                             </button>
-                            <button id="1134">
+                            <button fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1134">
                                 <rect key="frame" x="29" y="69" width="85" height="40"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <buttonCell key="cell" type="check" title="Checkbox" bezelStyle="regularSquare" imagePosition="left" alignment="center" state="on" inset="2" id="1135">
@@ -80,7 +80,7 @@
                                     <font key="font" metaFont="system"/>
                                 </buttonCell>
                             </button>
-                            <button id="1140">
+                            <button fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1140">
                                 <rect key="frame" x="163" y="69" width="152" height="40"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <buttonCell key="cell" type="check" title="Multistate Checkbox" bezelStyle="regularSquare" imagePosition="left" alignment="left" state="on" allowsMixedState="YES" inset="2" id="1141">
@@ -88,7 +88,7 @@
                                     <font key="font" metaFont="system"/>
                                 </buttonCell>
                             </button>
-                            <matrix verticalHuggingPriority="750" allowsEmptySelection="NO" id="1142">
+                            <matrix verticalHuggingPriority="750" fixedFrame="YES" allowsEmptySelection="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1142">
                                 <rect key="frame" x="31" y="14" width="168" height="40"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
@@ -113,7 +113,7 @@
                                     </column>
                                 </cells>
                             </matrix>
-                            <button verticalHuggingPriority="750" id="1196">
+                            <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1196">
                                 <rect key="frame" x="194" y="16" width="131" height="32"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <buttonCell key="cell" type="push" title="Set radio 2 On" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1197">
@@ -124,7 +124,7 @@
                                     <action selector="switchSelectedRadio:" target="450" id="1206"/>
                                 </connections>
                             </button>
-                            <button verticalHuggingPriority="750" id="1207">
+                            <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1207">
                                 <rect key="frame" x="143" y="103" width="176" height="25"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                 <buttonCell key="cell" type="roundTextured" title="Disabled With Image" bezelStyle="texturedRounded" imagePosition="left" alignment="center" enabled="NO" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1208">
@@ -136,6 +136,7 @@
                     </customView>
                 </subviews>
             </view>
+            <point key="canvasLocation" x="-244" y="136"/>
         </window>
         <customObject id="450" customClass="AppController">
             <connections>
@@ -159,16 +160,16 @@
                 <outlet property="toggleButton" destination="1216" id="1222"/>
             </connections>
         </customObject>
-        <window title="Continuous Button Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" oneShot="NO" animationBehavior="default" id="1183">
+        <window title="Continuous Button Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" animationBehavior="default" id="1183">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES" resizable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="200" y="1000" width="318" height="85"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" id="1184">
                 <rect key="frame" x="0.0" y="0.0" width="318" height="85"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <button verticalHuggingPriority="750" id="1185">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1185">
                         <rect key="frame" x="14" y="37" width="132" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Normal Button" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1186">
@@ -179,7 +180,7 @@
                             <action selector="countClick:" target="450" id="1194"/>
                         </connections>
                     </button>
-                    <button verticalHuggingPriority="750" id="1187">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1187">
                         <rect key="frame" x="146" y="37" width="158" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Continuous Button" bezelStyle="rounded" alignment="center" continuous="YES" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1188">
@@ -190,7 +191,7 @@
                             <action selector="countClick:" target="450" id="1195"/>
                         </connections>
                     </button>
-                    <textField verticalHuggingPriority="750" id="1189">
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1189">
                         <rect key="frame" x="17" y="20" width="107" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Recorded clicks:" id="1190">
@@ -199,7 +200,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField verticalHuggingPriority="750" id="1191">
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1191">
                         <rect key="frame" x="126" y="20" width="175" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="right" title="0" id="1192">
@@ -210,42 +211,81 @@
                     </textField>
                 </subviews>
             </view>
+            <point key="canvasLocation" x="-713" y="111"/>
         </window>
-        <window title="CPButton Button Type Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" oneShot="NO" showsToolbarButton="NO" animationBehavior="default" id="1210">
+        <window title="CPButton Button Type Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" animationBehavior="default" id="1210">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES" resizable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
-            <rect key="contentRect" x="1000" y="1000" width="271" height="156"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/>
+            <rect key="contentRect" x="1000" y="1000" width="381" height="264"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" id="1211">
-                <rect key="frame" x="0.0" y="0.0" width="271" height="156"/>
+                <rect key="frame" x="0.0" y="0.0" width="381" height="264"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <button verticalHuggingPriority="750" id="1212">
-                        <rect key="frame" x="25" y="108" width="220" height="32"/>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="7wo-oX-fZX">
+                        <rect key="frame" x="7" y="18" width="54" height="24"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <buttonCell key="cell" type="push" title="Push" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="MkR-Sb-Gzm">
+                            <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
+                            <font key="font" metaFont="system"/>
+                        </buttonCell>
+                    </button>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="njk-7Q-HVQ">
+                        <rect key="frame" x="68" y="18" width="115" height="23"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <buttonCell key="cell" type="roundTextured" title="Texture rounded" bezelStyle="texturedRounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="XRR-KY-Nff">
+                            <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
+                            <font key="font" metaFont="system"/>
+                        </buttonCell>
+                    </button>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Wap-KF-mU0">
+                        <rect key="frame" x="283" y="18" width="84" height="23"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <buttonCell key="cell" type="roundTextured" title="OK" bezelStyle="texturedRounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="dYI-gT-JsW">
+                            <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
+                            <font key="font" metaFont="system"/>
+                            <string key="keyEquivalent" base64-UTF8="YES">
+DQ
+</string>
+                        </buttonCell>
+                    </button>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="IGd-05-FEA">
+                        <rect key="frame" x="190" y="18" width="84" height="24"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <buttonCell key="cell" type="push" title="OK" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="qgi-cF-c6u">
+                            <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
+                            <font key="font" metaFont="system"/>
+                            <string key="keyEquivalent" base64-UTF8="YES">
+DQ
+</string>
+                        </buttonCell>
+                    </button>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1212">
+                        <rect key="frame" x="80" y="189" width="220" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Momentary Push In (Normal)" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1213">
                             <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="1214">
-                        <rect key="frame" x="25" y="76" width="220" height="32"/>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1214">
+                        <rect key="frame" x="80" y="157" width="220" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Push On / Push Off" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1215">
                             <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES" changeBackground="YES" changeGray="YES"/>
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="1216">
-                        <rect key="frame" x="25" y="44" width="220" height="32"/>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1216">
+                        <rect key="frame" x="80" y="125" width="220" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Toggle" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1217">
                             <behavior key="behavior" pushIn="YES" changeContents="YES" lightByContents="YES"/>
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="1218">
-                        <rect key="frame" x="25" y="12" width="220" height="32"/>
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1218">
+                        <rect key="frame" x="80" y="93" width="220" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Momentary Change" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1219">
                             <behavior key="behavior" lightByContents="YES"/>
@@ -254,17 +294,18 @@
                     </button>
                 </subviews>
             </view>
+            <point key="canvasLocation" x="-631.5" y="402"/>
         </window>
-        <window title="Monkey Button Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" oneShot="NO" showsToolbarButton="NO" animationBehavior="default" id="1224" userLabel="Window - Monkey Button Test">
+        <window title="Monkey Button Test" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" animationBehavior="default" id="1224" userLabel="Window - Monkey Button Test">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="1000" y="500" width="480" height="220"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" id="1225">
                 <rect key="frame" x="0.0" y="0.0" width="480" height="220"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <button verticalHuggingPriority="750" id="1226">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1226">
                         <rect key="frame" x="147" y="142" width="186" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Monkey Button" alternateTitle="Alternate Title" bezelStyle="rounded" image="NSAddTemplate" imagePosition="left" alignment="center" alternateImage="NSRemoveTemplate" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="1227">
@@ -275,15 +316,15 @@
                             <action selector="monkeyClick:" target="450" id="1259"/>
                         </connections>
                     </button>
-                    <box autoresizesSubviews="NO" title="Highlights By" borderType="line" id="1228">
+                    <box autoresizesSubviews="NO" fixedFrame="YES" borderType="line" title="Highlights By" translatesAutoresizingMaskIntoConstraints="NO" id="1228">
                         <rect key="frame" x="17" y="16" width="222" height="114"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <view key="contentView" id="Lxr-8q-OWd">
-                            <rect key="frame" x="1" y="1" width="220" height="98"/>
+                            <rect key="frame" x="4" y="5" width="214" height="94"/>
                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                             <subviews>
-                                <button tag="2" id="1230">
-                                    <rect key="frame" x="16" y="72" width="137" height="18"/>
+                                <button tag="2" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1230">
+                                    <rect key="frame" x="16" y="68" width="137" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPPushInCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1231">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -293,8 +334,8 @@
                                         <action selector="setMonkeyButtonHighlightedBy:" target="450" id="1247"/>
                                     </connections>
                                 </button>
-                                <button tag="1" id="1232">
-                                    <rect key="frame" x="16" y="52" width="152" height="18"/>
+                                <button tag="1" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1232">
+                                    <rect key="frame" x="16" y="48" width="152" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPContentsCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1233">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -304,8 +345,8 @@
                                         <action selector="setMonkeyButtonHighlightedBy:" target="450" id="1248"/>
                                     </connections>
                                 </button>
-                                <button tag="4" id="1234">
-                                    <rect key="frame" x="16" y="32" width="172" height="18"/>
+                                <button tag="4" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1234">
+                                    <rect key="frame" x="16" y="28" width="172" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPChangeGrayCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1235">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -315,8 +356,8 @@
                                         <action selector="setMonkeyButtonHighlightedBy:" target="450" id="1249"/>
                                     </connections>
                                 </button>
-                                <button tag="8" id="1236">
-                                    <rect key="frame" x="16" y="12" width="218" height="18"/>
+                                <button tag="8" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1236">
+                                    <rect key="frame" x="16" y="8" width="218" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPChangeBackgroundCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1237">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -328,18 +369,16 @@
                                 </button>
                             </subviews>
                         </view>
-                        <color key="borderColor" white="0.0" alpha="0.41999999999999998" colorSpace="calibratedWhite"/>
-                        <color key="fillColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                     </box>
-                    <box autoresizesSubviews="NO" title="Shows State By" borderType="line" id="1238">
+                    <box autoresizesSubviews="NO" fixedFrame="YES" borderType="line" title="Shows State By" translatesAutoresizingMaskIntoConstraints="NO" id="1238">
                         <rect key="frame" x="241" y="16" width="222" height="114"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <view key="contentView" id="rZ3-3d-f31">
-                            <rect key="frame" x="1" y="1" width="220" height="98"/>
+                            <rect key="frame" x="4" y="5" width="214" height="94"/>
                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                             <subviews>
-                                <button tag="2" id="1242">
-                                    <rect key="frame" x="16" y="72" width="137" height="18"/>
+                                <button tag="2" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1242">
+                                    <rect key="frame" x="16" y="68" width="137" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPPushInCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1243">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -349,8 +388,8 @@
                                         <action selector="setMonkeyButtonShowsStateBy:" target="450" id="1251"/>
                                     </connections>
                                 </button>
-                                <button tag="1" id="1241">
-                                    <rect key="frame" x="16" y="52" width="152" height="18"/>
+                                <button tag="1" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1241">
+                                    <rect key="frame" x="16" y="48" width="152" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPContentsCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1244">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -360,8 +399,8 @@
                                         <action selector="setMonkeyButtonShowsStateBy:" target="450" id="1252"/>
                                     </connections>
                                 </button>
-                                <button tag="4" id="1240">
-                                    <rect key="frame" x="16" y="32" width="172" height="18"/>
+                                <button tag="4" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1240">
+                                    <rect key="frame" x="16" y="28" width="172" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPChangeGrayCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1245">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -371,8 +410,8 @@
                                         <action selector="setMonkeyButtonShowsStateBy:" target="450" id="1253"/>
                                     </connections>
                                 </button>
-                                <button tag="8" id="1239">
-                                    <rect key="frame" x="16" y="12" width="218" height="18"/>
+                                <button tag="8" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1239">
+                                    <rect key="frame" x="16" y="8" width="218" height="18"/>
                                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                     <buttonCell key="cell" type="check" title="CPChangeBackgroundCellMask" bezelStyle="regularSquare" imagePosition="left" alignment="left" controlSize="small" inset="2" id="1246">
                                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
@@ -384,10 +423,8 @@
                                 </button>
                             </subviews>
                         </view>
-                        <color key="borderColor" white="0.0" alpha="0.41999999999999998" colorSpace="calibratedWhite"/>
-                        <color key="fillColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                     </box>
-                    <textField verticalHuggingPriority="750" id="1256">
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1256">
                         <rect key="frame" x="332" y="152" width="131" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Label" id="1257">
@@ -396,7 +433,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <button id="1260">
+                    <button fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1260">
                         <rect key="frame" x="151" y="181" width="138" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="check" title="Monkey Checkbox" bezelStyle="regularSquare" imagePosition="left" alignment="left" state="on" inset="2" id="1261">
@@ -407,7 +444,7 @@
                             <action selector="monkeyClick:" target="450" id="1267"/>
                         </connections>
                     </button>
-                    <textField verticalHuggingPriority="750" id="1262">
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="1262">
                         <rect key="frame" x="307" y="189" width="131" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Label" id="1263">
@@ -418,17 +455,18 @@
                     </textField>
                 </subviews>
             </view>
+            <point key="canvasLocation" x="-659" y="653"/>
         </window>
-        <window title="Image Scaling" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" oneShot="NO" releasedWhenClosed="NO" showsToolbarButton="NO" frameAutosaveName="" animationBehavior="default" id="Tpo-En-p6a">
+        <window title="Image Scaling" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" releasedWhenClosed="NO" frameAutosaveName="" animationBehavior="default" id="Tpo-En-p6a">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES" resizable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="1069" y="674" width="480" height="170"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="1680" height="1027"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" id="cEp-gS-qmd">
                 <rect key="frame" x="0.0" y="0.0" width="480" height="170"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <button verticalHuggingPriority="750" id="fSh-bq-jNK">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="fSh-bq-jNK">
                         <rect key="frame" x="170" y="89" width="224" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Proportionaly Up or Down" bezelStyle="rounded" image="Image-132x44" imagePosition="left" alignment="center" borderStyle="border" imageScaling="proportionallyUpOrDown" inset="2" id="Ajc-y6-vbT">
@@ -436,7 +474,7 @@
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="mkx-r0-hM7">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="mkx-r0-hM7">
                         <rect key="frame" x="170" y="56" width="224" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Axes Independently" bezelStyle="rounded" image="Image-132x44" imagePosition="left" alignment="center" borderStyle="border" imageScaling="axesIndependently" inset="2" id="sAm-Mv-d5H">
@@ -444,7 +482,7 @@
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="hBZ-UH-00V">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="hBZ-UH-00V">
                         <rect key="frame" x="170" y="23" width="224" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="None" bezelStyle="rounded" image="Image-132x44" imagePosition="left" alignment="center" borderStyle="border" inset="2" id="sIf-Vu-ebL">
@@ -452,7 +490,7 @@
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="wd9-uA-83T">
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="wd9-uA-83T">
                         <rect key="frame" x="11" y="129" width="159" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Square - Max height" id="Wwq-qG-IYv">
@@ -461,7 +499,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="zCA-IM-NQE">
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="zCA-IM-NQE">
                         <rect key="frame" x="11" y="100" width="159" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Square - Max height" id="iZg-uj-Qf6">
@@ -470,7 +508,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="bSY-94-P54">
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="bSY-94-P54">
                         <rect key="frame" x="11" y="65" width="159" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Max height - Max width" id="5eg-bg-FCf">
@@ -479,7 +517,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="xkv-KZ-JXP">
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="xkv-KZ-JXP">
                         <rect key="frame" x="11" y="33" width="159" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="None" id="b7r-mf-cz2">
@@ -488,7 +526,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <button verticalHuggingPriority="750" id="hGH-vZ-Etg">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="hGH-vZ-Etg">
                         <rect key="frame" x="170" y="122" width="224" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Proportionaly Down" bezelStyle="rounded" image="Image-132x44" imagePosition="left" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="AYt-r2-tSV">
@@ -503,7 +541,7 @@
     </objects>
     <resources>
         <image name="Image-132x44" width="26.879999160766602" height="80.639999389648438"/>
-        <image name="NSAddTemplate" width="11" height="11"/>
-        <image name="NSRemoveTemplate" width="11" height="11"/>
+        <image name="NSAddTemplate" width="18" height="17"/>
+        <image name="NSRemoveTemplate" width="18" height="5"/>
     </resources>
 </document>

Tests/Manual/CPComboBoxTest/Info.plist

@@ -6,5 +6,7 @@
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>
 	<string>CPComboBoxTest</string>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
 </dict>
 </plist>

Tests/Manual/CPControlSize/Info.plist

@@ -2,15 +2,15 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-    <key>Main cib file base name</key>
-    <string>MainMenu.cib</string>
-    <key>CPBundleName</key>
-    <string>CPControlSize</string>
-    <key>CPBundleVersion</key>
-    <string>1.0</string>
-    <key>CPHumanReadableCopyright</key>
-    <string>Copyright © 2014, All rights reserved.</string>
-    <key>CPDefaultTheme</key>
-    <string>Aristo2</string>
+	<key>Main cib file base name</key>
+	<string>MainMenu.cib</string>
+	<key>CPBundleName</key>
+	<string>CPControlSize</string>
+	<key>CPBundleVersion</key>
+	<string>1.0</string>
+	<key>CPHumanReadableCopyright</key>
+	<string>Copyright © 2014, All rights reserved.</string>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
 </dict>
 </plist>

Tests/Manual/CPControlSize/Resources/MainMenu.xib

@@ -1,8 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="5056" systemVersion="13E28" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="23727" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
     <dependencies>
         <deployment version="1050" identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="5056"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="23727"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <customObject id="-2" userLabel="File's Owner" customClass="NSApplication">
@@ -11,22 +12,22 @@
             </connections>
         </customObject>
         <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
-        <customObject id="-3" userLabel="Application"/>
+        <customObject id="-3" userLabel="Application" customClass="NSObject"/>
         <window title="Window" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" releasedWhenClosed="NO" animationBehavior="default" id="371">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="335" y="390" width="507" height="529"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="1440" height="878"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" id="372">
                 <rect key="frame" x="0.0" y="0.0" width="507" height="529"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <popUpButton verticalHuggingPriority="750" id="x4W-un-0cD">
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="x4W-un-0cD">
                         <rect key="frame" x="34" y="457" width="75" height="26"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <popUpButtonCell key="cell" type="push" bezelStyle="rounded" alignment="left" lineBreakMode="truncatingTail" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" id="twp-s2-LmJ">
                             <behavior key="behavior" lightByBackground="YES" lightByGray="YES"/>
-                            <font key="font" metaFont="menu"/>
+                            <font key="font" metaFont="message"/>
                             <menu key="menu" title="OtherViews" id="fcN-Dl-IQ8">
                                 <items>
                                     <menuItem title="Item 1" id="hrm-kY-Djl"/>
@@ -36,7 +37,7 @@
                             </menu>
                         </popUpButtonCell>
                     </popUpButton>
-                    <popUpButton verticalHuggingPriority="750" id="8xe-Ws-gbi">
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="8xe-Ws-gbi">
                         <rect key="frame" x="203" y="462" width="76" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <popUpButtonCell key="cell" type="push" bezelStyle="rounded" alignment="left" controlSize="small" lineBreakMode="truncatingTail" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" id="fnw-t6-xXN">
@@ -51,7 +52,7 @@
                             </menu>
                         </popUpButtonCell>
                     </popUpButton>
-                    <popUpButton verticalHuggingPriority="750" id="GrQ-cT-p98">
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="GrQ-cT-p98">
                         <rect key="frame" x="374" y="469" width="73" height="15"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <popUpButtonCell key="cell" type="push" bezelStyle="rounded" alignment="left" controlSize="mini" lineBreakMode="truncatingTail" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" id="oG3-q6-b8X">
@@ -66,25 +67,52 @@
                             </menu>
                         </popUpButtonCell>
                     </popUpButton>
-                    <textField verticalHuggingPriority="750" id="duZ-4B-IHi">
-                        <rect key="frame" x="36" y="419" width="96" height="22"/>
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="sWv-Oi-NAB">
+                        <rect key="frame" x="34" y="437" width="75" height="26"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
-                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="uNM-6c-a5P">
-                            <font key="font" metaFont="system"/>
-                            <color key="textColor" name="textColor" catalog="System" colorSpace="catalog"/>
-                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
-                        </textFieldCell>
-                    </textField>
-                    <textField verticalHuggingPriority="750" id="vYT-ma-Xce">
-                        <rect key="frame" x="206" y="423" width="96" height="19"/>
+                        <popUpButtonCell key="cell" type="push" title="Item 1" bezelStyle="rounded" alignment="left" lineBreakMode="truncatingTail" state="on" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" pullsDown="YES" id="Mn4-q3-Bx7">
+                            <behavior key="behavior" lightByBackground="YES" lightByGray="YES"/>
+                            <font key="font" metaFont="message"/>
+                            <menu key="menu" title="OtherViews" id="3kz-TD-Ppn">
+                                <items>
+                                    <menuItem title="Item 1" state="on" hidden="YES" id="DZW-gk-z8B"/>
+                                    <menuItem title="Item 2" id="gJY-2Y-jhp"/>
+                                    <menuItem title="Item 3" id="eai-58-BOe"/>
+                                </items>
+                            </menu>
+                        </popUpButtonCell>
+                    </popUpButton>
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="d4f-v2-CBb">
+                        <rect key="frame" x="203" y="442" width="76" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
-                        <textFieldCell key="cell" controlSize="small" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="FYM-U3-I2Q">
+                        <popUpButtonCell key="cell" type="push" title="Item 1" bezelStyle="rounded" alignment="left" controlSize="small" lineBreakMode="truncatingTail" state="on" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" pullsDown="YES" id="voq-uq-AB0">
+                            <behavior key="behavior" lightByBackground="YES" lightByGray="YES"/>
                             <font key="font" metaFont="smallSystem"/>
-                            <color key="textColor" name="textColor" catalog="System" colorSpace="catalog"/>
-                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
-                        </textFieldCell>
-                    </textField>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="BGc-LU-OEi">
+                            <menu key="menu" title="OtherViews" id="Szw-T7-IXt">
+                                <items>
+                                    <menuItem title="Item 1" state="on" hidden="YES" id="kJU-ty-LP3"/>
+                                    <menuItem title="Item 2" id="sxe-LP-5bH"/>
+                                    <menuItem title="Item 3" id="YhA-G3-3xP"/>
+                                </items>
+                            </menu>
+                        </popUpButtonCell>
+                    </popUpButton>
+                    <popUpButton verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="hd9-nJ-Cmc">
+                        <rect key="frame" x="374" y="449" width="73" height="15"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <popUpButtonCell key="cell" type="push" title="Item 1" bezelStyle="rounded" alignment="left" controlSize="mini" lineBreakMode="truncatingTail" state="on" borderStyle="borderAndBezel" imageScaling="proportionallyDown" inset="2" pullsDown="YES" id="dvF-1Q-HwG">
+                            <behavior key="behavior" lightByBackground="YES" lightByGray="YES"/>
+                            <font key="font" metaFont="miniSystem"/>
+                            <menu key="menu" title="OtherViews" id="0rb-Of-RxA">
+                                <items>
+                                    <menuItem title="Item 1" state="on" hidden="YES" id="1PU-KO-PeR"/>
+                                    <menuItem title="Item 2" id="iOg-bR-7Bw"/>
+                                    <menuItem title="Item 3" id="v1O-P3-Jdy"/>
+                                </items>
+                            </menu>
+                        </popUpButtonCell>
+                    </popUpButton>
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="BGc-LU-OEi">
                         <rect key="frame" x="34" y="494" width="81" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Regular size" id="NcJ-HR-XZI">
@@ -93,7 +121,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="twC-Ez-Cvs">
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="twC-Ez-Cvs">
                         <rect key="frame" x="204" y="497" width="67" height="14"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" controlSize="small" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Small size" id="6uG-ec-HEA">
@@ -102,7 +130,7 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" id="dCc-cq-MO7">
+                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="dCc-cq-MO7">
                         <rect key="frame" x="373" y="500" width="60" height="11"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <textFieldCell key="cell" controlSize="mini" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" title="Mini size" id="mx4-66-yGt">
@@ -111,229 +139,94 @@
                             <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                         </textFieldCell>
                     </textField>
-                    <textField verticalHuggingPriority="750" id="Baf-Et-cEO">
-                        <rect key="frame" x="375" y="426" width="96" height="16"/>
-                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
-                        <textFieldCell key="cell" controlSize="mini" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="8VU-QE-dZY">
-                            <font key="font" metaFont="miniSystem"/>
-                            <color key="textColor" name="textColor" catalog="System" colorSpace="catalog"/>
-                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
-                        </textFieldCell>
-                    </textField>
-                    <datePicker verticalHuggingPriority="750" id="pNn-Yt-Kof">
+                    <datePicker verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="pNn-Yt-Kof">
                         <rect key="frame" x="36" y="328" width="113" height="27"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <datePickerCell key="cell" borderStyle="bezel" alignment="left" id="T5R-AB-cuN">
                             <font key="font" metaFont="system"/>
-                            <calendarDate key="date" timeIntervalSinceReferenceDate="-595929600" calendarFormat="%Y-%m-%d %H:%M:%S %z">
-                                <!--1982-02-12 08:00:00 -0800-->
-                                <timeZone key="timeZone" name="US/Pacific">
-                                    <data key="data">
-VFppZgAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAC5AAAABAAAABCepkign7sVkKCGKqChmveQ
-y4kaoNIj9HDSYSYQ1v50INiArZDa/tGg28CQENzes6DdqayQ3r6VoN+JjpDgnneg4WlwkOJ+WaDjSVKQ
-5F47oOUpNJDmR1gg5xJREOgnOiDo8jMQ6gccIOrSFRDr5v4g7LH3EO3G4CDukdkQ76/8oPBxuxDxj96g
-8n/BkPNvwKD0X6OQ9U+ioPY/hZD3L4Sg+CiiEPkPZqD6CIQQ+viDIPvoZhD82GUg/chIEP64RyD/qCoQ
-AJgpIAGIDBACeAsgA3EokARhJ6AFUQqQBkEJoAcw7JAHjUOgCRDOkAmtvyAK8LCQC+CvoAzZzRANwJGg
-DrmvEA+priAQmZEQEYmQIBJ5cxATaXIgFFlVEBVJVCAWOTcQFyk2IBgiU5AZCRggGgI1kBryNKAb4heQ
-HNIWoB3B+ZAesfigH6HbkCB2KyAhgb2QIlYNICNq2hAkNe8gJUq8ECYV0SAnKp4QJ/7toCkKgBAp3s+g
-KupiECu+saAs036QLZ6ToC6zYJAvfnWgMJNCkDFnkiAycySQM0d0IDRTBpA1J1YgNjLokDcHOCA4HAUQ
-OOcaIDn75xA6xvwgO9vJEDywGKA9u6sQPo/6oD+bjRBAb9ygQYSpkEJPvqBDZIuQRC+goEVEbZBF89Mg
-Ry2KEEfTtSBJDWwQSbOXIErtThBLnLOgTNZqkE18laBOtkyQT1x3oFCWLpBRPFmgUnYQkFMcO6BUVfKQ
-VPwdoFY11JBW5TogWB7xEFjFHCBZ/tMQWqT+IFvetRBchOAgXb6XEF5kwiBfnnkQYE3eoGGHlZBiLcCg
-Y2d3kGQNoqBlR1mQZe2EoGcnO5BnzWagaQcdkGmtSKBq5v+Qa5ZlIGzQHBBtdkcgbq/+EG9WKSBwj+AQ
-cTYLIHJvwhBzFe0gdE+kEHT/CaB2OMCQdt7roHgYopB4vs2gefiEkHqer6B72GaQfH6RoH24SJB+XnOg
-f5gqkAABAAECAwEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
-</data>
-                                </timeZone>
-                            </calendarDate>
+                            <date key="date" timeIntervalSinceReferenceDate="-595929600">
+                                <!--1982-02-12 16:00:00 +0000-->
+                            </date>
                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                             <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
                         </datePickerCell>
                     </datePicker>
-                    <datePicker verticalHuggingPriority="750" id="WXE-xa-O7P">
+                    <datePicker verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="WXE-xa-O7P">
                         <rect key="frame" x="206" y="333" width="113" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <datePickerCell key="cell" controlSize="small" borderStyle="bezel" alignment="left" id="Qb0-X9-0KQ">
                             <font key="font" metaFont="smallSystem"/>
-                            <calendarDate key="date" timeIntervalSinceReferenceDate="-595929600" calendarFormat="%Y-%m-%d %H:%M:%S %z">
-                                <!--1982-02-12 08:00:00 -0800-->
-                                <timeZone key="timeZone" name="US/Pacific">
-                                    <data key="data">
-VFppZgAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAC5AAAABAAAABCepkign7sVkKCGKqChmveQ
-y4kaoNIj9HDSYSYQ1v50INiArZDa/tGg28CQENzes6DdqayQ3r6VoN+JjpDgnneg4WlwkOJ+WaDjSVKQ
-5F47oOUpNJDmR1gg5xJREOgnOiDo8jMQ6gccIOrSFRDr5v4g7LH3EO3G4CDukdkQ76/8oPBxuxDxj96g
-8n/BkPNvwKD0X6OQ9U+ioPY/hZD3L4Sg+CiiEPkPZqD6CIQQ+viDIPvoZhD82GUg/chIEP64RyD/qCoQ
-AJgpIAGIDBACeAsgA3EokARhJ6AFUQqQBkEJoAcw7JAHjUOgCRDOkAmtvyAK8LCQC+CvoAzZzRANwJGg
-DrmvEA+priAQmZEQEYmQIBJ5cxATaXIgFFlVEBVJVCAWOTcQFyk2IBgiU5AZCRggGgI1kBryNKAb4heQ
-HNIWoB3B+ZAesfigH6HbkCB2KyAhgb2QIlYNICNq2hAkNe8gJUq8ECYV0SAnKp4QJ/7toCkKgBAp3s+g
-KupiECu+saAs036QLZ6ToC6zYJAvfnWgMJNCkDFnkiAycySQM0d0IDRTBpA1J1YgNjLokDcHOCA4HAUQ
-OOcaIDn75xA6xvwgO9vJEDywGKA9u6sQPo/6oD+bjRBAb9ygQYSpkEJPvqBDZIuQRC+goEVEbZBF89Mg
-Ry2KEEfTtSBJDWwQSbOXIErtThBLnLOgTNZqkE18laBOtkyQT1x3oFCWLpBRPFmgUnYQkFMcO6BUVfKQ
-VPwdoFY11JBW5TogWB7xEFjFHCBZ/tMQWqT+IFvetRBchOAgXb6XEF5kwiBfnnkQYE3eoGGHlZBiLcCg
-Y2d3kGQNoqBlR1mQZe2EoGcnO5BnzWagaQcdkGmtSKBq5v+Qa5ZlIGzQHBBtdkcgbq/+EG9WKSBwj+AQ
-cTYLIHJvwhBzFe0gdE+kEHT/CaB2OMCQdt7roHgYopB4vs2gefiEkHqer6B72GaQfH6RoH24SJB+XnOg
-f5gqkAABAAECAwEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
-</data>
-                                </timeZone>
-                            </calendarDate>
+                            <date key="date" timeIntervalSinceReferenceDate="-595929600">
+                                <!--1982-02-12 16:00:00 +0000-->
+                            </date>
                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                             <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
                         </datePickerCell>
                     </datePicker>
-                    <datePicker verticalHuggingPriority="750" id="WeD-S8-Zxs">
+                    <datePicker verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="WeD-S8-Zxs">
                         <rect key="frame" x="375" y="338" width="113" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <datePickerCell key="cell" controlSize="mini" borderStyle="bezel" alignment="left" id="635-rQ-aDe">
                             <font key="font" metaFont="miniSystem"/>
-                            <calendarDate key="date" timeIntervalSinceReferenceDate="-595929600" calendarFormat="%Y-%m-%d %H:%M:%S %z">
-                                <!--1982-02-12 08:00:00 -0800-->
-                                <timeZone key="timeZone" name="US/Pacific">
-                                    <data key="data">
-VFppZgAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAC5AAAABAAAABCepkign7sVkKCGKqChmveQ
-y4kaoNIj9HDSYSYQ1v50INiArZDa/tGg28CQENzes6DdqayQ3r6VoN+JjpDgnneg4WlwkOJ+WaDjSVKQ
-5F47oOUpNJDmR1gg5xJREOgnOiDo8jMQ6gccIOrSFRDr5v4g7LH3EO3G4CDukdkQ76/8oPBxuxDxj96g
-8n/BkPNvwKD0X6OQ9U+ioPY/hZD3L4Sg+CiiEPkPZqD6CIQQ+viDIPvoZhD82GUg/chIEP64RyD/qCoQ
-AJgpIAGIDBACeAsgA3EokARhJ6AFUQqQBkEJoAcw7JAHjUOgCRDOkAmtvyAK8LCQC+CvoAzZzRANwJGg
-DrmvEA+priAQmZEQEYmQIBJ5cxATaXIgFFlVEBVJVCAWOTcQFyk2IBgiU5AZCRggGgI1kBryNKAb4heQ
-HNIWoB3B+ZAesfigH6HbkCB2KyAhgb2QIlYNICNq2hAkNe8gJUq8ECYV0SAnKp4QJ/7toCkKgBAp3s+g
-KupiECu+saAs036QLZ6ToC6zYJAvfnWgMJNCkDFnkiAycySQM0d0IDRTBpA1J1YgNjLokDcHOCA4HAUQ
-OOcaIDn75xA6xvwgO9vJEDywGKA9u6sQPo/6oD+bjRBAb9ygQYSpkEJPvqBDZIuQRC+goEVEbZBF89Mg
-Ry2KEEfTtSBJDWwQSbOXIErtThBLnLOgTNZqkE18laBOtkyQT1x3oFCWLpBRPFmgUnYQkFMcO6BUVfKQ
-VPwdoFY11JBW5TogWB7xEFjFHCBZ/tMQWqT+IFvetRBchOAgXb6XEF5kwiBfnnkQYE3eoGGHlZBiLcCg
-Y2d3kGQNoqBlR1mQZe2EoGcnO5BnzWagaQcdkGmtSKBq5v+Qa5ZlIGzQHBBtdkcgbq/+EG9WKSBwj+AQ
-cTYLIHJvwhBzFe0gdE+kEHT/CaB2OMCQdt7roHgYopB4vs2gefiEkHqer6B72GaQfH6RoH24SJB+XnOg
-f5gqkAABAAECAwEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
-</data>
-                                </timeZone>
-                            </calendarDate>
+                            <date key="date" timeIntervalSinceReferenceDate="-595929600">
+                                <!--1982-02-12 16:00:00 +0000-->
+                            </date>
                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                             <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
                         </datePickerCell>
                     </datePicker>
-                    <datePicker verticalHuggingPriority="750" id="ULi-zW-Q5q">
+                    <datePicker verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="ULi-zW-Q5q">
                         <rect key="frame" x="36" y="281" width="113" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <datePickerCell key="cell" borderStyle="bezel" alignment="left" datePickerStyle="textField" id="RCm-sN-nrQ">
                             <font key="font" metaFont="system"/>
-                            <calendarDate key="date" timeIntervalSinceReferenceDate="-595929600" calendarFormat="%Y-%m-%d %H:%M:%S %z">
-                                <!--1982-02-12 08:00:00 -0800-->
-                                <timeZone key="timeZone" name="US/Pacific">
-                                    <data key="data">
-VFppZgAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAC5AAAABAAAABCepkign7sVkKCGKqChmveQ
-y4kaoNIj9HDSYSYQ1v50INiArZDa/tGg28CQENzes6DdqayQ3r6VoN+JjpDgnneg4WlwkOJ+WaDjSVKQ
-5F47oOUpNJDmR1gg5xJREOgnOiDo8jMQ6gccIOrSFRDr5v4g7LH3EO3G4CDukdkQ76/8oPBxuxDxj96g
-8n/BkPNvwKD0X6OQ9U+ioPY/hZD3L4Sg+CiiEPkPZqD6CIQQ+viDIPvoZhD82GUg/chIEP64RyD/qCoQ
-AJgpIAGIDBACeAsgA3EokARhJ6AFUQqQBkEJoAcw7JAHjUOgCRDOkAmtvyAK8LCQC+CvoAzZzRANwJGg
-DrmvEA+priAQmZEQEYmQIBJ5cxATaXIgFFlVEBVJVCAWOTcQFyk2IBgiU5AZCRggGgI1kBryNKAb4heQ
-HNIWoB3B+ZAesfigH6HbkCB2KyAhgb2QIlYNICNq2hAkNe8gJUq8ECYV0SAnKp4QJ/7toCkKgBAp3s+g
-KupiECu+saAs036QLZ6ToC6zYJAvfnWgMJNCkDFnkiAycySQM0d0IDRTBpA1J1YgNjLokDcHOCA4HAUQ
-OOcaIDn75xA6xvwgO9vJEDywGKA9u6sQPo/6oD+bjRBAb9ygQYSpkEJPvqBDZIuQRC+goEVEbZBF89Mg
-Ry2KEEfTtSBJDWwQSbOXIErtThBLnLOgTNZqkE18laBOtkyQT1x3oFCWLpBRPFmgUnYQkFMcO6BUVfKQ
-VPwdoFY11JBW5TogWB7xEFjFHCBZ/tMQWqT+IFvetRBchOAgXb6XEF5kwiBfnnkQYE3eoGGHlZBiLcCg
-Y2d3kGQNoqBlR1mQZe2EoGcnO5BnzWagaQcdkGmtSKBq5v+Qa5ZlIGzQHBBtdkcgbq/+EG9WKSBwj+AQ
-cTYLIHJvwhBzFe0gdE+kEHT/CaB2OMCQdt7roHgYopB4vs2gefiEkHqer6B72GaQfH6RoH24SJB+XnOg
-f5gqkAABAAECAwEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
-</data>
-                                </timeZone>
-                            </calendarDate>
+                            <date key="date" timeIntervalSinceReferenceDate="-595929600">
+                                <!--1982-02-12 16:00:00 +0000-->
+                            </date>
                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                             <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
                         </datePickerCell>
                     </datePicker>
-                    <datePicker verticalHuggingPriority="750" id="fx1-CP-l9m">
+                    <datePicker verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="fx1-CP-l9m">
                         <rect key="frame" x="206" y="285" width="113" height="19"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <datePickerCell key="cell" controlSize="small" borderStyle="bezel" alignment="left" datePickerStyle="textField" id="0fE-Wg-6b6">
                             <font key="font" metaFont="smallSystem"/>
-                            <calendarDate key="date" timeIntervalSinceReferenceDate="-595929600" calendarFormat="%Y-%m-%d %H:%M:%S %z">
-                                <!--1982-02-12 08:00:00 -0800-->
-                                <timeZone key="timeZone" name="US/Pacific">
-                                    <data key="data">
-VFppZgAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAC5AAAABAAAABCepkign7sVkKCGKqChmveQ
-y4kaoNIj9HDSYSYQ1v50INiArZDa/tGg28CQENzes6DdqayQ3r6VoN+JjpDgnneg4WlwkOJ+WaDjSVKQ
-5F47oOUpNJDmR1gg5xJREOgnOiDo8jMQ6gccIOrSFRDr5v4g7LH3EO3G4CDukdkQ76/8oPBxuxDxj96g
-8n/BkPNvwKD0X6OQ9U+ioPY/hZD3L4Sg+CiiEPkPZqD6CIQQ+viDIPvoZhD82GUg/chIEP64RyD/qCoQ
-AJgpIAGIDBACeAsgA3EokARhJ6AFUQqQBkEJoAcw7JAHjUOgCRDOkAmtvyAK8LCQC+CvoAzZzRANwJGg
-DrmvEA+priAQmZEQEYmQIBJ5cxATaXIgFFlVEBVJVCAWOTcQFyk2IBgiU5AZCRggGgI1kBryNKAb4heQ
-HNIWoB3B+ZAesfigH6HbkCB2KyAhgb2QIlYNICNq2hAkNe8gJUq8ECYV0SAnKp4QJ/7toCkKgBAp3s+g
-KupiECu+saAs036QLZ6ToC6zYJAvfnWgMJNCkDFnkiAycySQM0d0IDRTBpA1J1YgNjLokDcHOCA4HAUQ
-OOcaIDn75xA6xvwgO9vJEDywGKA9u6sQPo/6oD+bjRBAb9ygQYSpkEJPvqBDZIuQRC+goEVEbZBF89Mg
-Ry2KEEfTtSBJDWwQSbOXIErtThBLnLOgTNZqkE18laBOtkyQT1x3oFCWLpBRPFmgUnYQkFMcO6BUVfKQ
-VPwdoFY11JBW5TogWB7xEFjFHCBZ/tMQWqT+IFvetRBchOAgXb6XEF5kwiBfnnkQYE3eoGGHlZBiLcCg
-Y2d3kGQNoqBlR1mQZe2EoGcnO5BnzWagaQcdkGmtSKBq5v+Qa5ZlIGzQHBBtdkcgbq/+EG9WKSBwj+AQ
-cTYLIHJvwhBzFe0gdE+kEHT/CaB2OMCQdt7roHgYopB4vs2gefiEkHqer6B72GaQfH6RoH24SJB+XnOg
-f5gqkAABAAECAwEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
-</data>
-                                </timeZone>
-                            </calendarDate>
+                            <date key="date" timeIntervalSinceReferenceDate="-595929600">
+                                <!--1982-02-12 16:00:00 +0000-->
+                            </date>
                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                             <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
                         </datePickerCell>
                     </datePicker>
-                    <datePicker verticalHuggingPriority="750" id="dwU-8f-1Ek">
+                    <datePicker verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="dwU-8f-1Ek">
                         <rect key="frame" x="375" y="287" width="110" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <datePickerCell key="cell" controlSize="mini" borderStyle="bezel" alignment="left" datePickerStyle="textField" id="O65-rh-JeL">
                             <font key="font" metaFont="miniSystem"/>
-                            <calendarDate key="date" timeIntervalSinceReferenceDate="-595929600" calendarFormat="%Y-%m-%d %H:%M:%S %z">
-                                <!--1982-02-12 08:00:00 -0800-->
-                                <timeZone key="timeZone" name="US/Pacific">
-                                    <data key="data">
-VFppZgAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAC5AAAABAAAABCepkign7sVkKCGKqChmveQ
-y4kaoNIj9HDSYSYQ1v50INiArZDa/tGg28CQENzes6DdqayQ3r6VoN+JjpDgnneg4WlwkOJ+WaDjSVKQ
-5F47oOUpNJDmR1gg5xJREOgnOiDo8jMQ6gccIOrSFRDr5v4g7LH3EO3G4CDukdkQ76/8oPBxuxDxj96g
-8n/BkPNvwKD0X6OQ9U+ioPY/hZD3L4Sg+CiiEPkPZqD6CIQQ+viDIPvoZhD82GUg/chIEP64RyD/qCoQ
-AJgpIAGIDBACeAsgA3EokARhJ6AFUQqQBkEJoAcw7JAHjUOgCRDOkAmtvyAK8LCQC+CvoAzZzRANwJGg
-DrmvEA+priAQmZEQEYmQIBJ5cxATaXIgFFlVEBVJVCAWOTcQFyk2IBgiU5AZCRggGgI1kBryNKAb4heQ
-HNIWoB3B+ZAesfigH6HbkCB2KyAhgb2QIlYNICNq2hAkNe8gJUq8ECYV0SAnKp4QJ/7toCkKgBAp3s+g
-KupiECu+saAs036QLZ6ToC6zYJAvfnWgMJNCkDFnkiAycySQM0d0IDRTBpA1J1YgNjLokDcHOCA4HAUQ
-OOcaIDn75xA6xvwgO9vJEDywGKA9u6sQPo/6oD+bjRBAb9ygQYSpkEJPvqBDZIuQRC+goEVEbZBF89Mg
-Ry2KEEfTtSBJDWwQSbOXIErtThBLnLOgTNZqkE18laBOtkyQT1x3oFCWLpBRPFmgUnYQkFMcO6BUVfKQ
-VPwdoFY11JBW5TogWB7xEFjFHCBZ/tMQWqT+IFvetRBchOAgXb6XEF5kwiBfnnkQYE3eoGGHlZBiLcCg
-Y2d3kGQNoqBlR1mQZe2EoGcnO5BnzWagaQcdkGmtSKBq5v+Qa5ZlIGzQHBBtdkcgbq/+EG9WKSBwj+AQ
-cTYLIHJvwhBzFe0gdE+kEHT/CaB2OMCQdt7roHgYopB4vs2gefiEkHqer6B72GaQfH6RoH24SJB+XnOg
-f5gqkAABAAECAwEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEA
-AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
-</data>
-                                </timeZone>
-                            </calendarDate>
+                            <date key="date" timeIntervalSinceReferenceDate="-595929600">
+                                <!--1982-02-12 16:00:00 +0000-->
+                            </date>
                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                             <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
                         </datePickerCell>
                     </datePicker>
-                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" id="Pf5-bX-XNM">
+                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Pf5-bX-XNM">
                         <rect key="frame" x="33" y="374" width="19" height="27"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <stepperCell key="cell" continuous="YES" alignment="left" maxValue="100" id="UBb-vf-dHD"/>
                     </stepper>
-                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" id="fX5-Cx-kra">
+                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="fX5-Cx-kra">
                         <rect key="frame" x="204" y="381" width="15" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <stepperCell key="cell" controlSize="small" continuous="YES" alignment="left" maxValue="100" id="s3t-dy-wPz"/>
                     </stepper>
-                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" id="eJ6-cs-745">
+                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="eJ6-cs-745">
                         <rect key="frame" x="373" y="388" width="13" height="15"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <stepperCell key="cell" controlSize="mini" continuous="YES" alignment="left" maxValue="100" id="RqJ-YK-TXI"/>
                     </stepper>
-                    <button verticalHuggingPriority="750" id="qeW-JF-8PA">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="qeW-JF-8PA">
                         <rect key="frame" x="30" y="192" width="82" height="32"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Button" bezelStyle="rounded" alignment="center" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="r33-XP-TYJ">
@@ -341,7 +234,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="bUw-8W-83b">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="bUw-8W-83b">
                         <rect key="frame" x="201" y="196" width="82" height="28"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Button" bezelStyle="rounded" alignment="center" controlSize="small" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="iFL-tR-EKi">
@@ -349,7 +242,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="smallSystem"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="mtR-eh-GXS">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="mtR-eh-GXS">
                         <rect key="frame" x="374" y="204" width="82" height="16"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="push" title="Button" bezelStyle="rounded" alignment="center" controlSize="mini" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="Ebs-LH-Vnq">
@@ -357,7 +250,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="miniSystem"/>
                         </buttonCell>
                     </button>
-                    <button id="utt-sX-YI9">
+                    <button fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="utt-sX-YI9">
                         <rect key="frame" x="34" y="238" width="81" height="18"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="check" title="Check" bezelStyle="regularSquare" imagePosition="left" state="on" inset="2" id="plS-mh-316">
@@ -365,7 +258,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button id="5tT-da-cbF">
+                    <button fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="5tT-da-cbF">
                         <rect key="frame" x="203" y="237" width="75" height="20"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="check" title="Check" bezelStyle="regularSquare" imagePosition="left" controlSize="small" state="on" inset="2" id="OGk-WN-tAu">
@@ -373,7 +266,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="smallSystem"/>
                         </buttonCell>
                     </button>
-                    <button id="wmA-RV-jeJ">
+                    <button fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="wmA-RV-jeJ">
                         <rect key="frame" x="371" y="237" width="63" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="check" title="Check" bezelStyle="regularSquare" imagePosition="left" controlSize="mini" inset="2" id="ro6-1L-HbO">
@@ -381,7 +274,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="miniSystem"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="OuO-8D-Jv1">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="OuO-8D-Jv1">
                         <rect key="frame" x="36" y="155" width="110" height="25"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="squareTextured" title="Textured Button" bezelStyle="texturedSquare" imagePosition="overlaps" alignment="center" state="on" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="SNT-aA-bDy">
@@ -389,7 +282,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="eG9-13-wdi">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="eG9-13-wdi">
                         <rect key="frame" x="206" y="160" width="110" height="19"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="squareTextured" title="Textured Button" bezelStyle="texturedSquare" imagePosition="overlaps" alignment="center" controlSize="small" state="on" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="xJm-nS-cPR">
@@ -397,7 +290,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="smallSystem"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="7FL-7D-m2j">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="7FL-7D-m2j">
                         <rect key="frame" x="375" y="163" width="110" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="squareTextured" title="Textured Button" bezelStyle="texturedSquare" imagePosition="overlaps" alignment="center" controlSize="mini" state="on" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="np3-qE-wIc">
@@ -405,7 +298,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="miniSystem"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="pqa-mo-oK1">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="pqa-mo-oK1">
                         <rect key="frame" x="36" y="117" width="115" height="25"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="roundTextured" title="Round Textured" bezelStyle="texturedRounded" alignment="center" state="on" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="rpo-yw-hd8">
@@ -413,7 +306,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="system"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="Mv6-Iy-X4h">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Mv6-Iy-X4h">
                         <rect key="frame" x="206" y="122" width="115" height="19"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="roundTextured" title="Round Textured" bezelStyle="texturedRounded" alignment="center" controlSize="small" state="on" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="PQW-Lc-Dm5">
@@ -421,7 +314,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="smallSystem"/>
                         </buttonCell>
                     </button>
-                    <button verticalHuggingPriority="750" id="O3l-BH-NXK">
+                    <button verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="O3l-BH-NXK">
                         <rect key="frame" x="375" y="125" width="115" height="17"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <buttonCell key="cell" type="roundTextured" title="Round Textured" bezelStyle="texturedRounded" alignment="center" controlSize="mini" state="on" borderStyle="border" imageScaling="proportionallyDown" inset="2" id="fzh-RR-war">
@@ -429,7 +322,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <font key="font" metaFont="miniSystem"/>
                         </buttonCell>
                     </button>
-                    <matrix verticalHuggingPriority="750" allowsEmptySelection="NO" autorecalculatesCellSize="YES" id="eUQ-61-gJI">
+                    <matrix verticalHuggingPriority="750" fixedFrame="YES" allowsEmptySelection="NO" autorecalculatesCellSize="YES" translatesAutoresizingMaskIntoConstraints="NO" id="eUQ-61-gJI">
                         <rect key="frame" x="36" y="67" width="70" height="44"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
@@ -452,7 +345,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             </column>
                         </cells>
                     </matrix>
-                    <matrix verticalHuggingPriority="750" allowsEmptySelection="NO" autorecalculatesCellSize="YES" id="IGX-cm-xbF">
+                    <matrix verticalHuggingPriority="750" fixedFrame="YES" allowsEmptySelection="NO" autorecalculatesCellSize="YES" translatesAutoresizingMaskIntoConstraints="NO" id="IGX-cm-xbF">
                         <rect key="frame" x="206" y="73" width="63" height="38"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
@@ -475,7 +368,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             </column>
                         </cells>
                     </matrix>
-                    <matrix verticalHuggingPriority="750" allowsEmptySelection="NO" autorecalculatesCellSize="YES" id="SLm-Fm-NnP">
+                    <matrix verticalHuggingPriority="750" fixedFrame="YES" allowsEmptySelection="NO" autorecalculatesCellSize="YES" translatesAutoresizingMaskIntoConstraints="NO" id="SLm-Fm-NnP">
                         <rect key="frame" x="375" y="73" width="57" height="38"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
@@ -498,7 +391,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             </column>
                         </cells>
                     </matrix>
-                    <comboBox verticalHuggingPriority="750" id="yfb-qa-Ypy">
+                    <comboBox verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="yfb-qa-Ypy">
                         <rect key="frame" x="36" y="35" width="99" height="26"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <comboBoxCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" borderStyle="bezel" drawsBackground="YES" completes="NO" numberOfVisibleItems="5" id="7lM-32-tfT">
@@ -507,7 +400,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
                         </comboBoxCell>
                     </comboBox>
-                    <comboBox verticalHuggingPriority="750" id="aGP-Sw-SGa">
+                    <comboBox verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="aGP-Sw-SGa">
                         <rect key="frame" x="206" y="38" width="99" height="22"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <comboBoxCell key="cell" controlSize="small" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" borderStyle="bezel" drawsBackground="YES" completes="NO" numberOfVisibleItems="5" id="1HS-Qg-oau">
@@ -516,7 +409,7 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
                         </comboBoxCell>
                     </comboBox>
-                    <comboBox verticalHuggingPriority="750" id="Sub-ME-hYL">
+                    <comboBox verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Sub-ME-hYL">
                         <rect key="frame" x="375" y="41" width="99" height="19"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                         <comboBoxCell key="cell" controlSize="mini" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" borderStyle="bezel" drawsBackground="YES" completes="NO" numberOfVisibleItems="5" id="6Ao-lo-5FY">
@@ -525,8 +418,36 @@ AQABAAEAAQAB//+dkAEA//+PgAAE//+dkAEI//+dkAEMUERUAFBTVABQV1QAUFBUAAAAAAEAAAABA
                             <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
                         </comboBoxCell>
                     </comboBox>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="duZ-4B-IHi">
+                        <rect key="frame" x="36" y="410" width="96" height="22"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="uNM-6c-a5P">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="vYT-ma-Xce">
+                        <rect key="frame" x="206" y="414" width="96" height="19"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" controlSize="small" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="FYM-U3-I2Q">
+                            <font key="font" metaFont="smallSystem"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Baf-Et-cEO">
+                        <rect key="frame" x="375" y="417" width="96" height="16"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" controlSize="mini" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="8VU-QE-dZY">
+                            <font key="font" metaFont="miniSystem"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
                 </subviews>
             </view>
+            <point key="canvasLocation" x="140" y="144"/>
         </window>
         <customObject id="450" customClass="AppController">
             <connections>

Tests/Manual/CPDatePickerTest/Info.plist

@@ -2,6 +2,10 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CPDefaulTheme</key>
+	<string>Aristo2</string>
+	<key>CFBundleIdentifier</key>
+	<string></string>
 	<key>Main cib file base name</key>
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>

Tests/Manual/CPMenuTest/AppController.j

@@ -15,7 +15,7 @@
 
 - (void)applicationDidFinishLaunching:(CPNotification)aNotification
 {
-    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask],
+    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask | CPHUDBackgroundWindowMask],
         contentView = [theWindow contentView],
         popupButton = [[CPPopUpButton alloc] initWithFrame:CGRectMakeZero()];
 

Tests/Manual/CPOutlineViewCibTest/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
 	<key>Main cib file base name</key>
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>

Tests/Manual/CPPopUpButtonBindings/CPPopUpButton.j

@@ -1 +0,0 @@
-../../../AppKit/CPPopUpButton.j

Tests/Manual/CPSegmentedControlTest/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
 	<key>Main cib file base name</key>
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>

Tests/Manual/CPSplitViewTest/Info.plist

@@ -2,6 +2,10 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
+	<key>CFBundleIdentifier</key>
+	<string></string>
 	<key>Main cib file base name</key>
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>

Tests/Manual/CPStepperNibTest/Resources/MainMenu.xib

@@ -1,785 +1,138 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<archive type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="7.10">
-	<data>
-		<int key="IBDocument.SystemTarget">1050</int>
-		<string key="IBDocument.SystemVersion">11D50</string>
-		<string key="IBDocument.InterfaceBuilderVersion">2166</string>
-		<string key="IBDocument.AppKitVersion">1138.32</string>
-		<string key="IBDocument.HIToolboxVersion">568.00</string>
-		<object class="NSMutableDictionary" key="IBDocument.PluginVersions">
-			<string key="NS.key.0">com.apple.InterfaceBuilder.CocoaPlugin</string>
-			<string key="NS.object.0">2166</string>
-		</object>
-		<object class="NSArray" key="IBDocument.IntegratedClassDependencies">
-			<bool key="EncodedWithXMLCoder">YES</bool>
-			<string>NSTextField</string>
-			<string>NSView</string>
-			<string>NSWindowTemplate</string>
-			<string>NSCustomObject</string>
-			<string>NSTextFieldCell</string>
-			<string>NSButtonCell</string>
-			<string>NSStepperCell</string>
-			<string>NSButton</string>
-			<string>NSStepper</string>
-		</object>
-		<object class="NSArray" key="IBDocument.PluginDependencies">
-			<bool key="EncodedWithXMLCoder">YES</bool>
-			<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-		</object>
-		<object class="NSMutableDictionary" key="IBDocument.Metadata">
-			<string key="NS.key.0">PluginDependencyRecalculationVersion</string>
-			<integer value="1" key="NS.object.0"/>
-		</object>
-		<object class="NSMutableArray" key="IBDocument.RootObjects" id="1048">
-			<bool key="EncodedWithXMLCoder">YES</bool>
-			<object class="NSCustomObject" id="1021">
-				<string key="NSClassName">NSApplication</string>
-			</object>
-			<object class="NSCustomObject" id="1014">
-				<string key="NSClassName">FirstResponder</string>
-			</object>
-			<object class="NSCustomObject" id="1050">
-				<string key="NSClassName">NSApplication</string>
-			</object>
-			<object class="NSWindowTemplate" id="972006081">
-				<int key="NSWindowStyleMask">7</int>
-				<int key="NSWindowBacking">2</int>
-				<string key="NSWindowRect">{{630, 330}, {480, 360}}</string>
-				<int key="NSWTFlags">1946157056</int>
-				<string key="NSWindowTitle">Window</string>
-				<string key="NSWindowClass">NSWindow</string>
-				<nil key="NSViewClass"/>
-				<nil key="NSUserInterfaceItemIdentifier"/>
-				<object class="NSView" key="NSWindowView" id="439893737">
-					<reference key="NSNextResponder"/>
-					<int key="NSvFlags">268</int>
-					<object class="NSMutableArray" key="NSSubviews">
-						<bool key="EncodedWithXMLCoder">YES</bool>
-						<object class="NSStepper" id="509771538">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">301</int>
-							<string key="NSFrame">{{283, 166}, {19, 27}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView"/>
-							<string key="NSReuseIdentifierKey">_NS:1083</string>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSStepperCell" key="NSCell" id="592305023">
-								<int key="NSCellFlags">130560</int>
-								<int key="NSCellFlags2">0</int>
-								<string key="NSCellIdentifier">_NS:1083</string>
-								<reference key="NSControlView" ref="509771538"/>
-								<double key="NSValue">3</double>
-								<double key="NSMinValue">1</double>
-								<double key="NSMaxValue">100</double>
-								<double key="NSIncrement">2</double>
-								<bool key="NSValueWraps">YES</bool>
-							</object>
-						</object>
-						<object class="NSTextField" id="933695137">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">301</int>
-							<string key="NSFrame">{{182, 169}, {96, 22}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="509771538"/>
-							<string key="NSReuseIdentifierKey">_NS:9</string>
-							<int key="NSTag">1004</int>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="838078397">
-								<int key="NSCellFlags">-1804468671</int>
-								<int key="NSCellFlags2">272630784</int>
-								<string key="NSContents"/>
-								<object class="NSFont" key="NSSupport" id="874579053">
-									<string key="NSName">LucidaGrande</string>
-									<double key="NSSize">13</double>
-									<int key="NSfFlags">1044</int>
-								</object>
-								<string key="NSCellIdentifier">_NS:9</string>
-								<reference key="NSControlView" ref="933695137"/>
-								<bool key="NSDrawsBackground">YES</bool>
-								<object class="NSColor" key="NSBackgroundColor" id="645866797">
-									<int key="NSColorSpace">6</int>
-									<string key="NSCatalogName">System</string>
-									<string key="NSColorName">textBackgroundColor</string>
-									<object class="NSColor" key="NSColor">
-										<int key="NSColorSpace">3</int>
-										<bytes key="NSWhite">MQA</bytes>
-									</object>
-								</object>
-								<object class="NSColor" key="NSTextColor" id="519242318">
-									<int key="NSColorSpace">6</int>
-									<string key="NSCatalogName">System</string>
-									<string key="NSColorName">textColor</string>
-									<object class="NSColor" key="NSColor" id="756629293">
-										<int key="NSColorSpace">3</int>
-										<bytes key="NSWhite">MAA</bytes>
-									</object>
-								</object>
-							</object>
-						</object>
-						<object class="NSTextField" id="1057654329">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{364, 318}, {96, 22}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="922995932"/>
-							<string key="NSReuseIdentifierKey">_NS:9</string>
-							<int key="NSTag">1000</int>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="267827436">
-								<int key="NSCellFlags">-1804468671</int>
-								<int key="NSCellFlags2">272630784</int>
-								<string key="NSContents"/>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:9</string>
-								<reference key="NSControlView" ref="1057654329"/>
-								<bool key="NSDrawsBackground">YES</bool>
-								<reference key="NSBackgroundColor" ref="645866797"/>
-								<reference key="NSTextColor" ref="519242318"/>
-							</object>
-						</object>
-						<object class="NSTextField" id="301559886">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{282, 321}, {72, 17}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="1057654329"/>
-							<string key="NSReuseIdentifierKey">_NS:1505</string>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="791615300">
-								<int key="NSCellFlags">68288064</int>
-								<int key="NSCellFlags2">71304192</int>
-								<string key="NSContents">Increment:</string>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:1505</string>
-								<reference key="NSControlView" ref="301559886"/>
-								<object class="NSColor" key="NSBackgroundColor" id="693920540">
-									<int key="NSColorSpace">6</int>
-									<string key="NSCatalogName">System</string>
-									<string key="NSColorName">controlColor</string>
-									<object class="NSColor" key="NSColor">
-										<int key="NSColorSpace">3</int>
-										<bytes key="NSWhite">MC42NjY2NjY2NjY3AA</bytes>
-									</object>
-								</object>
-								<object class="NSColor" key="NSTextColor" id="744483847">
-									<int key="NSColorSpace">6</int>
-									<string key="NSCatalogName">System</string>
-									<string key="NSColorName">controlTextColor</string>
-									<reference key="NSColor" ref="756629293"/>
-								</object>
-							</object>
-						</object>
-						<object class="NSTextField" id="408506247">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{364, 288}, {96, 22}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="642392448"/>
-							<string key="NSReuseIdentifierKey">_NS:9</string>
-							<int key="NSTag">1001</int>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="1039890158">
-								<int key="NSCellFlags">-1804468671</int>
-								<int key="NSCellFlags2">272630784</int>
-								<string key="NSContents"/>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:9</string>
-								<reference key="NSControlView" ref="408506247"/>
-								<bool key="NSDrawsBackground">YES</bool>
-								<reference key="NSBackgroundColor" ref="645866797"/>
-								<reference key="NSTextColor" ref="519242318"/>
-							</object>
-						</object>
-						<object class="NSTextField" id="922995932">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{284, 291}, {70, 17}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="408506247"/>
-							<string key="NSReuseIdentifierKey">_NS:1505</string>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="854028330">
-								<int key="NSCellFlags">68288064</int>
-								<int key="NSCellFlags2">71304192</int>
-								<string key="NSContents">Min Value:</string>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:1505</string>
-								<reference key="NSControlView" ref="922995932"/>
-								<reference key="NSBackgroundColor" ref="693920540"/>
-								<reference key="NSTextColor" ref="744483847"/>
-							</object>
-						</object>
-						<object class="NSTextField" id="564904546">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{364, 261}, {96, 22}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="262010029"/>
-							<string key="NSReuseIdentifierKey">_NS:9</string>
-							<int key="NSTag">1002</int>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="323823125">
-								<int key="NSCellFlags">-1804468671</int>
-								<int key="NSCellFlags2">272630784</int>
-								<string key="NSContents"/>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:9</string>
-								<reference key="NSControlView" ref="564904546"/>
-								<bool key="NSDrawsBackground">YES</bool>
-								<reference key="NSBackgroundColor" ref="645866797"/>
-								<reference key="NSTextColor" ref="519242318"/>
-							</object>
-						</object>
-						<object class="NSTextField" id="642392448">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{280, 264}, {74, 17}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="564904546"/>
-							<string key="NSReuseIdentifierKey">_NS:1505</string>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSTextFieldCell" key="NSCell" id="690301542">
-								<int key="NSCellFlags">68288064</int>
-								<int key="NSCellFlags2">71304192</int>
-								<string key="NSContents">Max Value:</string>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:1505</string>
-								<reference key="NSControlView" ref="642392448"/>
-								<reference key="NSBackgroundColor" ref="693920540"/>
-								<reference key="NSTextColor" ref="744483847"/>
-							</object>
-						</object>
-						<object class="NSButton" id="262010029">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{272, 237}, {109, 18}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="840163120"/>
-							<string key="NSReuseIdentifierKey">_NS:9</string>
-							<int key="NSTag">1003</int>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSButtonCell" key="NSCell" id="706205089">
-								<int key="NSCellFlags">-2080244224</int>
-								<int key="NSCellFlags2">0</int>
-								<string key="NSContents">wraps value:</string>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:9</string>
-								<reference key="NSControlView" ref="262010029"/>
-								<int key="NSButtonFlags">1210864127</int>
-								<int key="NSButtonFlags2">2</int>
-								<object class="NSCustomResource" key="NSNormalImage" id="393149046">
-									<string key="NSClassName">NSImage</string>
-									<string key="NSResourceName">NSSwitch</string>
-								</object>
-								<object class="NSButtonImageSource" key="NSAlternateImage" id="997794418">
-									<string key="NSImageName">NSSwitch</string>
-								</object>
-								<string key="NSAlternateContents"/>
-								<string key="NSKeyEquivalent"/>
-								<int key="NSPeriodicDelay">200</int>
-								<int key="NSPeriodicInterval">25</int>
-							</object>
-						</object>
-						<object class="NSButton" id="840163120">
-							<reference key="NSNextResponder" ref="439893737"/>
-							<int key="NSvFlags">265</int>
-							<string key="NSFrame">{{281, 213}, {100, 18}}</string>
-							<reference key="NSSuperview" ref="439893737"/>
-							<reference key="NSWindow"/>
-							<reference key="NSNextKeyView" ref="933695137"/>
-							<string key="NSReuseIdentifierKey">_NS:9</string>
-							<int key="NSTag">1005</int>
-							<bool key="NSEnabled">YES</bool>
-							<object class="NSButtonCell" key="NSCell" id="1016719909">
-								<int key="NSCellFlags">-2080244224</int>
-								<int key="NSCellFlags2">0</int>
-								<string key="NSContents">autorepeat:</string>
-								<reference key="NSSupport" ref="874579053"/>
-								<string key="NSCellIdentifier">_NS:9</string>
-								<reference key="NSControlView" ref="840163120"/>
-								<int key="NSButtonFlags">1210864127</int>
-								<int key="NSButtonFlags2">2</int>
-								<reference key="NSNormalImage" ref="393149046"/>
-								<reference key="NSAlternateImage" ref="997794418"/>
-								<string key="NSAlternateContents"/>
-								<string key="NSKeyEquivalent"/>
-								<int key="NSPeriodicDelay">200</int>
-								<int key="NSPeriodicInterval">25</int>
-							</object>
-						</object>
-					</object>
-					<string key="NSFrameSize">{480, 360}</string>
-					<reference key="NSSuperview"/>
-					<reference key="NSWindow"/>
-					<reference key="NSNextKeyView" ref="301559886"/>
-				</object>
-				<string key="NSScreenRect">{{0, 0}, {1680, 1028}}</string>
-				<string key="NSMaxSize">{10000000000000, 10000000000000}</string>
-				<bool key="NSWindowIsRestorable">YES</bool>
-			</object>
-			<object class="NSCustomObject" id="635946545">
-				<string key="NSClassName">AppController</string>
-			</object>
-		</object>
-		<object class="IBObjectContainer" key="IBDocument.Objects">
-			<object class="NSMutableArray" key="connectionRecords">
-				<bool key="EncodedWithXMLCoder">YES</bool>
-				<object class="IBConnectionRecord">
-					<object class="IBOutletConnection" key="connection">
-						<string key="label">delegate</string>
-						<reference key="source" ref="1021"/>
-						<reference key="destination" ref="635946545"/>
-					</object>
-					<int key="connectionID">451</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBOutletConnection" key="connection">
-						<string key="label">theWindow</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="972006081"/>
-					</object>
-					<int key="connectionID">459</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBOutletConnection" key="connection">
-						<string key="label">stepper</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="509771538"/>
-					</object>
-					<int key="connectionID">462</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBActionConnection" key="connection">
-						<string key="label">setWraps:</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="262010029"/>
-					</object>
-					<int key="connectionID">482</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBActionConnection" key="connection">
-						<string key="label">setMax:</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="564904546"/>
-					</object>
-					<int key="connectionID">483</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBActionConnection" key="connection">
-						<string key="label">setMin:</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="408506247"/>
-					</object>
-					<int key="connectionID">484</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBActionConnection" key="connection">
-						<string key="label">setIncrement:</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="1057654329"/>
-					</object>
-					<int key="connectionID">485</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBActionConnection" key="connection">
-						<string key="label">setAutorepeat:</string>
-						<reference key="source" ref="635946545"/>
-						<reference key="destination" ref="840163120"/>
-					</object>
-					<int key="connectionID">491</int>
-				</object>
-				<object class="IBConnectionRecord">
-					<object class="IBActionConnection" key="connection">
-						<string key="label">takeDoubleValueFrom:</string>
-						<reference key="source" ref="933695137"/>
-						<reference key="destination" ref="509771538"/>
-					</object>
-					<int key="connectionID">465</int>
-				</object>
-			</object>
-			<object class="IBMutableOrderedSet" key="objectRecords">
-				<object class="NSArray" key="orderedObjects">
-					<bool key="EncodedWithXMLCoder">YES</bool>
-					<object class="IBObjectRecord">
-						<int key="objectID">0</int>
-						<object class="NSArray" key="object" id="0">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-						</object>
-						<reference key="children" ref="1048"/>
-						<nil key="parent"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">-2</int>
-						<reference key="object" ref="1021"/>
-						<reference key="parent" ref="0"/>
-						<string key="objectName">File's Owner</string>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">-1</int>
-						<reference key="object" ref="1014"/>
-						<reference key="parent" ref="0"/>
-						<string key="objectName">First Responder</string>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">-3</int>
-						<reference key="object" ref="1050"/>
-						<reference key="parent" ref="0"/>
-						<string key="objectName">Application</string>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">371</int>
-						<reference key="object" ref="972006081"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="439893737"/>
-						</object>
-						<reference key="parent" ref="0"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">372</int>
-						<reference key="object" ref="439893737"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="509771538"/>
-							<reference ref="933695137"/>
-							<reference ref="1057654329"/>
-							<reference ref="301559886"/>
-							<reference ref="408506247"/>
-							<reference ref="922995932"/>
-							<reference ref="564904546"/>
-							<reference ref="642392448"/>
-							<reference ref="262010029"/>
-							<reference ref="840163120"/>
-						</object>
-						<reference key="parent" ref="972006081"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">450</int>
-						<reference key="object" ref="635946545"/>
-						<reference key="parent" ref="0"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">460</int>
-						<reference key="object" ref="509771538"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="592305023"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">461</int>
-						<reference key="object" ref="592305023"/>
-						<reference key="parent" ref="509771538"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">463</int>
-						<reference key="object" ref="933695137"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="838078397"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">464</int>
-						<reference key="object" ref="838078397"/>
-						<reference key="parent" ref="933695137"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">466</int>
-						<reference key="object" ref="1057654329"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="267827436"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">467</int>
-						<reference key="object" ref="267827436"/>
-						<reference key="parent" ref="1057654329"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">468</int>
-						<reference key="object" ref="301559886"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="791615300"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">469</int>
-						<reference key="object" ref="791615300"/>
-						<reference key="parent" ref="301559886"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">470</int>
-						<reference key="object" ref="408506247"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="1039890158"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">471</int>
-						<reference key="object" ref="922995932"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="854028330"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">472</int>
-						<reference key="object" ref="854028330"/>
-						<reference key="parent" ref="922995932"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">473</int>
-						<reference key="object" ref="1039890158"/>
-						<reference key="parent" ref="408506247"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">474</int>
-						<reference key="object" ref="564904546"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="323823125"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">475</int>
-						<reference key="object" ref="642392448"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="690301542"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">476</int>
-						<reference key="object" ref="690301542"/>
-						<reference key="parent" ref="642392448"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">477</int>
-						<reference key="object" ref="323823125"/>
-						<reference key="parent" ref="564904546"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">480</int>
-						<reference key="object" ref="262010029"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="706205089"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">481</int>
-						<reference key="object" ref="706205089"/>
-						<reference key="parent" ref="262010029"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">486</int>
-						<reference key="object" ref="840163120"/>
-						<object class="NSMutableArray" key="children">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<reference ref="1016719909"/>
-						</object>
-						<reference key="parent" ref="439893737"/>
-					</object>
-					<object class="IBObjectRecord">
-						<int key="objectID">487</int>
-						<reference key="object" ref="1016719909"/>
-						<reference key="parent" ref="840163120"/>
-					</object>
-				</object>
-			</object>
-			<object class="NSMutableDictionary" key="flattenedProperties">
-				<bool key="EncodedWithXMLCoder">YES</bool>
-				<object class="NSArray" key="dict.sortedKeys">
-					<bool key="EncodedWithXMLCoder">YES</bool>
-					<string>-1.IBPluginDependency</string>
-					<string>-2.IBPluginDependency</string>
-					<string>-3.IBPluginDependency</string>
-					<string>371.IBPluginDependency</string>
-					<string>371.IBWindowTemplateEditedContentRect</string>
-					<string>371.NSWindowTemplate.visibleAtLaunch</string>
-					<string>372.IBPluginDependency</string>
-					<string>450.IBPluginDependency</string>
-					<string>460.IBPluginDependency</string>
-					<string>461.IBPluginDependency</string>
-					<string>463.IBPluginDependency</string>
-					<string>464.IBPluginDependency</string>
-					<string>466.IBPluginDependency</string>
-					<string>467.IBPluginDependency</string>
-					<string>468.IBPluginDependency</string>
-					<string>469.IBPluginDependency</string>
-					<string>470.IBPluginDependency</string>
-					<string>471.IBPluginDependency</string>
-					<string>472.IBPluginDependency</string>
-					<string>473.IBPluginDependency</string>
-					<string>474.IBPluginDependency</string>
-					<string>475.IBPluginDependency</string>
-					<string>476.IBPluginDependency</string>
-					<string>477.IBPluginDependency</string>
-					<string>480.IBPluginDependency</string>
-					<string>481.IBPluginDependency</string>
-					<string>486.IBPluginDependency</string>
-					<string>487.IBPluginDependency</string>
-				</object>
-				<object class="NSArray" key="dict.values">
-					<bool key="EncodedWithXMLCoder">YES</bool>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>{{303, 221}, {480, 360}}</string>
-					<integer value="1"/>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-					<string>com.apple.InterfaceBuilder.CocoaPlugin</string>
-				</object>
-			</object>
-			<object class="NSMutableDictionary" key="unlocalizedProperties">
-				<bool key="EncodedWithXMLCoder">YES</bool>
-				<reference key="dict.sortedKeys" ref="0"/>
-				<reference key="dict.values" ref="0"/>
-			</object>
-			<nil key="activeLocalization"/>
-			<object class="NSMutableDictionary" key="localizations">
-				<bool key="EncodedWithXMLCoder">YES</bool>
-				<reference key="dict.sortedKeys" ref="0"/>
-				<reference key="dict.values" ref="0"/>
-			</object>
-			<nil key="sourceID"/>
-			<int key="maxID">491</int>
-		</object>
-		<object class="IBClassDescriber" key="IBDocument.Classes">
-			<object class="NSMutableArray" key="referencedPartialClassDescriptions">
-				<bool key="EncodedWithXMLCoder">YES</bool>
-				<object class="IBPartialClassDescription">
-					<string key="className">AppController</string>
-					<string key="superclassName">NSObject</string>
-					<object class="NSMutableDictionary" key="actions">
-						<bool key="EncodedWithXMLCoder">YES</bool>
-						<object class="NSArray" key="dict.sortedKeys">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<string>setAutorepeat:</string>
-							<string>setIncrement:</string>
-							<string>setMax:</string>
-							<string>setMin:</string>
-							<string>setWraps:</string>
-						</object>
-						<object class="NSArray" key="dict.values">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<string>id</string>
-							<string>id</string>
-							<string>id</string>
-							<string>id</string>
-							<string>id</string>
-						</object>
-					</object>
-					<object class="NSMutableDictionary" key="actionInfosByName">
-						<bool key="EncodedWithXMLCoder">YES</bool>
-						<object class="NSArray" key="dict.sortedKeys">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<string>setAutorepeat:</string>
-							<string>setIncrement:</string>
-							<string>setMax:</string>
-							<string>setMin:</string>
-							<string>setWraps:</string>
-						</object>
-						<object class="NSArray" key="dict.values">
-							<bool key="EncodedWithXMLCoder">YES</bool>
-							<object class="IBActionInfo">
-								<string key="name">setAutorepeat:</string>
-								<string key="candidateClassName">id</string>
-							</object>
-							<object class="IBActionInfo">
-								<string key="name">setIncrement:</string>
-								<string key="candidateClassName">id</string>
-							</object>
-							<object class="IBActionInfo">
-								<string key="name">setMax:</string>
-								<string key="candidateClassName">id</string>
-							</object>
-							<object class="IBActionInfo">
-								<string key="name">setMin:</string>
-								<string key="candidateClassName">id</string>
-							</object>
-							<object class="IBActionInfo">
-								<string key="name">setWraps:</string>
-								<string key="candidateClassName">id</string>
-							</object>
-						</object>
-					</object>
-					<object class="NSMutableDictionary" key="outlets">
-						<string key="NS.key.0">stepper</string>
-						<string key="NS.object.0">NSStepper</string>
-					</object>
-					<object class="NSMutableDictionary" key="toOneOutletInfosByName">
-						<string key="NS.key.0">stepper</string>
-						<object class="IBToOneOutletInfo" key="NS.object.0">
-							<string key="name">stepper</string>
-							<string key="candidateClassName">NSStepper</string>
-						</object>
-					</object>
-					<object class="IBClassDescriptionSource" key="sourceIdentifier">
-						<string key="majorKey">IBProjectSource</string>
-						<string key="minorKey">./Classes/AppController.h</string>
-					</object>
-				</object>
-			</object>
-		</object>
-		<int key="IBDocument.localizationMode">0</int>
-		<string key="IBDocument.TargetRuntimeIdentifier">IBCocoaFramework</string>
-		<object class="NSMutableDictionary" key="IBDocument.PluginDeclaredDependencies">
-			<string key="NS.key.0">com.apple.InterfaceBuilder.CocoaPlugin.macosx</string>
-			<integer value="1050" key="NS.object.0"/>
-		</object>
-		<object class="NSMutableDictionary" key="IBDocument.PluginDeclaredDevelopmentDependencies">
-			<string key="NS.key.0">com.apple.InterfaceBuilder.CocoaPlugin.InterfaceBuilder3</string>
-			<integer value="3000" key="NS.object.0"/>
-		</object>
-		<bool key="IBDocument.PluginDeclaredDependenciesTrackSystemTargetVersion">YES</bool>
-		<int key="IBDocument.defaultPropertyAccessControl">3</int>
-		<object class="NSMutableDictionary" key="IBDocument.LastKnownImageSizes">
-			<string key="NS.key.0">NSSwitch</string>
-			<string key="NS.object.0">{15, 15}</string>
-		</object>
-	</data>
-</archive>
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="19529" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
+    <dependencies>
+        <deployment version="1050" identifier="macosx"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="19529"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <customObject id="-2" userLabel="File's Owner" customClass="NSApplication">
+            <connections>
+                <outlet property="delegate" destination="450" id="451"/>
+            </connections>
+        </customObject>
+        <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
+        <customObject id="-3" userLabel="Application"/>
+        <window title="Window" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" releasedWhenClosed="NO" animationBehavior="default" id="371">
+            <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES"/>
+            <windowPositionMask key="initialPositionMask" leftStrut="YES" bottomStrut="YES"/>
+            <rect key="contentRect" x="630" y="330" width="480" height="360"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="1792" height="1095"/>
+            <view key="contentView" id="372">
+                <rect key="frame" x="0.0" y="0.0" width="480" height="360"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+                <subviews>
+                    <stepper horizontalHuggingPriority="750" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="460">
+                        <rect key="frame" x="283" y="166" width="19" height="27"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
+                        <stepperCell key="cell" alignment="left" increment="2" minValue="1" maxValue="100" doubleValue="3" autorepeat="NO" valueWraps="YES" id="461"/>
+                        <connections>
+                            <action selector="takeDoubleValueFrom:" target="463" id="465"/>
+                        </connections>
+                    </stepper>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" tag="1004" translatesAutoresizingMaskIntoConstraints="NO" id="463">
+                        <rect key="frame" x="182" y="169" width="96" height="22"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="464">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" tag="1000" translatesAutoresizingMaskIntoConstraints="NO" id="466">
+                        <rect key="frame" x="364" y="318" width="96" height="22"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="467">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                        <connections>
+                            <action selector="setIncrement:" target="450" id="485"/>
+                        </connections>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="468">
+                        <rect key="frame" x="282" y="321" width="72" height="17"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="right" title="Increment:" id="469">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" tag="1001" translatesAutoresizingMaskIntoConstraints="NO" id="470">
+                        <rect key="frame" x="364" y="288" width="96" height="22"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="473">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                        <connections>
+                            <action selector="setMin:" target="450" id="484"/>
+                        </connections>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="471">
+                        <rect key="frame" x="284" y="291" width="70" height="17"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="right" title="Min Value:" id="472">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" tag="1002" translatesAutoresizingMaskIntoConstraints="NO" id="474">
+                        <rect key="frame" x="364" y="261" width="96" height="22"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" selectable="YES" editable="YES" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" drawsBackground="YES" id="477">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                        <connections>
+                            <action selector="setMax:" target="450" id="483"/>
+                        </connections>
+                    </textField>
+                    <textField verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="475">
+                        <rect key="frame" x="280" y="264" width="74" height="17"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="right" title="Max Value:" id="476">
+                            <font key="font" metaFont="system"/>
+                            <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
+                            <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
+                        </textFieldCell>
+                    </textField>
+                    <button fixedFrame="YES" tag="1003" imageHugsTitle="YES" translatesAutoresizingMaskIntoConstraints="NO" id="480">
+                        <rect key="frame" x="272" y="237" width="109" height="18"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <buttonCell key="cell" type="check" title="wraps value:" bezelStyle="regularSquare" imagePosition="trailing" alignment="left" state="on" inset="2" id="481">
+                            <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
+                            <font key="font" metaFont="system"/>
+                        </buttonCell>
+                        <connections>
+                            <action selector="setWraps:" target="450" id="482"/>
+                        </connections>
+                    </button>
+                    <button fixedFrame="YES" tag="1005" imageHugsTitle="YES" translatesAutoresizingMaskIntoConstraints="NO" id="486">
+                        <rect key="frame" x="281" y="213" width="100" height="18"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
+                        <buttonCell key="cell" type="check" title="autorepeat:" bezelStyle="regularSquare" imagePosition="trailing" alignment="left" state="on" inset="2" id="487">
+                            <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
+                            <font key="font" metaFont="system"/>
+                        </buttonCell>
+                        <connections>
+                            <action selector="setAutorepeat:" target="450" id="491"/>
+                        </connections>
+                    </button>
+                </subviews>
+            </view>
+            <point key="canvasLocation" x="-52" y="55"/>
+        </window>
+        <customObject id="450" customClass="AppController">
+            <connections>
+                <outlet property="stepper" destination="460" id="462"/>
+                <outlet property="theWindow" destination="371" id="459"/>
+            </connections>
+        </customObject>
+    </objects>
+</document>

Tests/Manual/CPTokenFieldTest/Info.plist

@@ -4,8 +4,8 @@
 <dict>
 	<key>CPApplicationDelegateClass</key>
 	<string>AppController</string>
-    <key>CPDefaultTheme</key>
-    <string>Aristo2</string>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
 	<key>CPBundleName</key>
 	<string>CPTokenFieldTest</string>
 	<key>CPPrincipalClass</key>

Tests/Manual/CPToolbarTest/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CPDefaultTheme</key>
+	<string>Aristo2</string>
 	<key>CPApplicationDelegateClass</key>
 	<string>AppController</string>
 	<key>CPBundleName</key>

Tests/Manual/SmartFoldersDemo/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
 	<key>Main cib file base name</key>
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>

Tests/Manual/ThemeKitchenSink/Info.plist

@@ -6,11 +6,11 @@
 	<string>MainMenu.cib</string>
 	<key>CPBundleName</key>
 	<string>ThemeKitchenSink</string>
-    <key>CPDefaultTheme</key>
-	<string>Aristo2</string>
-    <key>CPBundleVersion</key>
-    <string>1.0</string>
-    <key>CPHumanReadableCopyright</key>
-    <string>Copyright © 2014, SlevenBits, Ltd. All rights reserved.</string>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
+	<key>CPBundleVersion</key>
+	<string>1.0</string>
+	<key>CPHumanReadableCopyright</key>
+	<string>Copyright © 2014, SlevenBits, Ltd. All rights reserved.</string>
 </dict>
 </plist>

Tests/Manual/ThemeKitchenSinkA3/Info.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CPDefaultTheme</key>
+	<string>Aristo3</string>
+	<key>CPApplicationDelegateClass</key>
+	<string>AppController</string>
+	<key>CPBundleName</key>
+	<string>KitchenSink Aristo3</string>
+	<key>CPPrincipalClass</key>
+	<string>CPApplication</string>
+</dict>
+</plist>

Tests/Manual/ThemeKitchenSinkA3/Jakefile

@@ -0,0 +1,182 @@
+/*
+ * Jakefile
+ * ThemeKitchenSinkA3
+ *
+ */
+
+var ENV = require("system").env,
+    FILE = require("file"),
+    JAKE = require("jake"),
+    task = JAKE.task,
+    FileList = JAKE.FileList,
+    app = require("cappuccino/jake").app,
+    configuration = ENV["CONFIG"] || ENV["CONFIGURATION"] || ENV["c"] || "Debug",
+    OS = require("os"),
+    projectName = "ThemeKitchenSinkA3";
+
+app (projectName, function(task)
+{
+    ENV["OBJJ_INCLUDE_PATHS"] = "Frameworks";
+
+    if (configuration === "Debug")
+        ENV["OBJJ_INCLUDE_PATHS"] = FILE.join(ENV["OBJJ_INCLUDE_PATHS"], configuration);
+
+    task.setBuildIntermediatesPath(FILE.join("Build", "ThemeKitchenSinkA3.build", configuration));
+    task.setBuildPath(FILE.join("Build", configuration));
+
+    task.setProductName("ThemeKitchenSinkA3");
+    task.setIdentifier("com.yourcompany.ThemeKitchenSinkA3");
+    task.setVersion("1.0");
+    task.setAuthor("SlevenBits, Ltd.");
+    task.setEmail("feedback @nospam@ yourcompany.com");
+    task.setSummary("ThemeKitchenSinkA3");
+    task.setSources(new FileList("**/*.j").exclude(FILE.join("Build", "**")).exclude(FILE.join("Frameworks", "Source", "**")));
+    task.setResources(new FileList("Resources/**"));
+    task.setIndexFilePath("index.html");
+    task.setInfoPlistPath("Info.plist");
+
+    if (configuration === "Debug")
+        task.setCompilerFlags("-DDEBUG -g");
+    else
+        task.setCompilerFlags("-O");
+});
+
+task ("default", [projectName], function()
+{
+    printResults(configuration);
+});
+
+task ("build", ["default"], function()
+{
+    updateApplicationSize();
+});
+
+task ("debug", function()
+{
+    ENV["CONFIGURATION"] = "Debug";
+    JAKE.subjake(["."], "build", ENV);
+});
+
+task ("release", function()
+{
+    ENV["CONFIGURATION"] = "Release";
+    JAKE.subjake(["."], "build", ENV);
+});
+
+task ("run", ["debug"], function()
+{
+    OS.system(["open", FILE.join("Build", "Debug", projectName, "index.html")]);
+});
+
+task ("run-release", ["release"], function()
+{
+    OS.system(["open", FILE.join("Build", "Release", projectName, "index.html")]);
+});
+
+task ("deploy", ["release"], function()
+{
+    FILE.mkdirs(FILE.join("Build", "Deployment", projectName));
+    OS.system(["press", "-f", FILE.join("Build", "Release", projectName), FILE.join("Build", "Deployment", projectName)]);
+    printResults("Deployment")
+});
+
+task ("desktop", ["release"], function()
+{
+    FILE.mkdirs(FILE.join("Build", "Desktop", projectName));
+    require("cappuccino/nativehost").buildNativeHost(FILE.join("Build", "Release", projectName), FILE.join("Build", "Desktop", projectName, "ThemeKitchenSinkA3.app"));
+    printResults("Desktop")
+});
+
+task ("run-desktop", ["desktop"], function()
+{
+    OS.system([FILE.join("Build", "Desktop", projectName, "ThemeKitchenSinkA3.app", "Contents", "MacOS", "NativeHost"), "-i"]);
+});
+
+function printResults(configuration)
+{
+    print("----------------------------");
+    print(configuration+" app built at path: "+FILE.join("Build", configuration, projectName));
+    print("----------------------------");
+}
+
+function updateApplicationSize()
+{
+    print("Calculating application file sizes...");
+
+    var contents = FILE.read(FILE.join("Build", ENV["CONFIGURATION"], projectName, "Info.plist"), { charset:"UTF-8" }),
+        format = CFPropertyList.sniffedFormatOfString(contents),
+        plist = CFPropertyList.propertyListFromString(contents),
+        totalBytes = {executable:0, data:0, mhtml:0};
+
+    // Get the size of all framework executables and sprite data
+    var frameworksDir = "Frameworks";
+
+    if (ENV["CONFIGURATION"] === "Debug")
+        frameworksDir = FILE.join(frameworksDir, "Debug");
+
+    var frameworks = FILE.list(frameworksDir);
+
+    frameworks.forEach(function(framework)
+    {
+        if (framework !== "Source")
+            addBundleFileSizes(FILE.join(frameworksDir, framework), totalBytes);
+    });
+
+    // Read in the default theme name, and attempt to get its size
+    var themeName = plist.valueForKey("CPDefaultTheme") || "Aristo2",
+        themePath = nil;
+
+    if (themeName === "Aristo" || themeName === "Aristo2")
+        themePath = FILE.join(frameworksDir, "AppKit", "Resources", themeName + ".blend");
+    else
+        themePath = FILE.join("Frameworks", "Resources", themeName + ".blend");
+
+    if (FILE.isDirectory(themePath))
+        addBundleFileSizes(themePath, totalBytes);
+
+    // Add sizes for the app
+    addBundleFileSizes(FILE.join("Build", ENV["CONFIGURATION"], projectName), totalBytes);
+
+    print("Executables: " + totalBytes.executable + ", sprite data: " + totalBytes.data + ", total: " + (totalBytes.executable + totalBytes.data));
+
+    var dict = new CFMutableDictionary();
+
+    dict.setValueForKey("executable", totalBytes.executable);
+    dict.setValueForKey("data", totalBytes.data);
+    dict.setValueForKey("mhtml", totalBytes.mhtml);
+
+    plist.setValueForKey("CPApplicationSize", dict);
+
+    FILE.write(FILE.join("Build", ENV["CONFIGURATION"], projectName, "Info.plist"), CFPropertyList.stringFromPropertyList(plist, format), { charset:"UTF-8" });
+}
+
+function addBundleFileSizes(bundlePath, totalBytes)
+{
+    var bundleName = FILE.basename(bundlePath),
+        environment = bundleName === "Foundation" ? "Objj" : "Browser",
+        bundlePath = FILE.join(bundlePath, environment + ".environment");
+
+    if (FILE.isDirectory(bundlePath))
+    {
+        var filename = bundleName + ".sj",
+            filePath = new FILE.Path(FILE.join(bundlePath, filename));
+
+        if (filePath.exists())
+            totalBytes.executable += filePath.size();
+
+        filePath = new FILE.Path(FILE.join(bundlePath, "dataURLs.txt"));
+
+        if (filePath.exists())
+            totalBytes.data += filePath.size();
+
+        filePath = new FILE.Path(FILE.join(bundlePath, "MHTMLData.txt"));
+
+        if (filePath.exists())
+            totalBytes.mhtml += filePath.size();
+
+        filePath = new FILE.Path(FILE.join(bundlePath, "MHTMLPaths.txt"));
+
+        if (filePath.exists())
+            totalBytes.mhtml += filePath.size();
+    }
+}

Tests/Manual/ThemeKitchenSinkA3/index-debug.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+ index-debug.html
+ __project.name__
+
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
+-->
+    <head>
+        <meta charset="utf-8">
+
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
+
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
+                    </div>
+                </div>
+            </noscript>
+        </div>
+    </body>
+</html>

Tests/Manual/ThemeKitchenSinkA3/index.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+ index.html
+ __project.name__
+
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
+-->
+    <head>
+        <meta charset="utf-8">
+
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
+
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
+                    </div>
+                </div>
+            </noscript>
+        </div>
+    </body>
+</html>

Tests/Manual/ThemeKitchenSinkA3/main.j

@@ -0,0 +1,18 @@
+/*
+ * AppController.j
+ * ThemeKitchenSink
+ *
+ * Created by Alexander Ljungberg on May 11, 2014.
+ * Copyright 2014, SlevenBits, Ltd. All rights reserved.
+ */
+
+@import <Foundation/Foundation.j>
+@import <AppKit/AppKit.j>
+
+@import "AppController.j"
+
+
+function main(args, namedArgs)
+{
+    CPApplicationMain(args, namedArgs);
+}

Tools/nib2cib/NSButton.j

@@ -211,8 +211,8 @@ var NSButtonIsBorderedMask = 0x00800000,
         }
     }
 
-    _keyEquivalent = [cell keyEquivalent];
-    _keyEquivalentModifierMask = [cell keyEquivalentModifierMask];
+    [self setKeyEquivalent:[cell keyEquivalent]];
+    [self setKeyEquivalentModifierMask:[cell keyEquivalentModifierMask]];
     _imageDimsWhenDisabled = YES;
 
     _allowsMixedState = [cell allowsMixedState];

Tools/nib2cib/NSCell.j

@@ -61,8 +61,9 @@
 
     if (self)
     {
-        var flags  = [aCoder decodeIntForKey:@"NSCellFlags"],
-            flags2 = [aCoder decodeIntForKey:@"NSCellFlags2"];
+        var flags          = [aCoder decodeIntForKey:@"NSCellFlags"],
+            flags2         = [aCoder decodeIntForKey:@"NSCellFlags2"],
+            newControlSize = [aCoder decodeIntForKey:@"NSControlSize2"];
 
         _state                      = (flags & 0x80000000) ? CPOnState : CPOffState;
         _isHighlighted              = (flags & 0x40000000) ? YES : NO;
@@ -84,6 +85,11 @@
         _usesSingleLineMode         = (flags2 & 0xF4240) ? YES : NO;
 
         _tag = [aCoder decodeIntForKey:@"NSTag"];
+        
+        // Since MacOS 11, there's a new control size "Large" and a new key "NSControlSize2"
+        // For compatibility reasons, we compute the control size based on the old and the new methods
+        if (newControlSize > 2)
+            _controlSize = newControlSize;
 
         _objectValue    = [aCoder decodeObjectForKey:@"NSContents"];
         _font           = [aCoder decodeObjectForKey:@"NSSupport"];

Tools/nib2cib/NSProgressIndicator.j

@@ -27,6 +27,10 @@
 var NSProgressIndicatorSpinningFlag = 1 << 12;
 
 @implementation CPProgressIndicator (NSCoding)
+- (id)updateBackgroundColor
+{
+
+}
 
 - (id)NS_initWithCoder:(CPCoder)aCoder
 {

dist/cappuccino/bin/flatten

@@ -233,7 +233,7 @@ ObjectiveJFlattener.prototype.serializeFunctions = function() {
             var functionString = executable._function.toString().replace(", require, exports, module, system, print, window", ""); // HACK
 
             var relative = this.rootPath.relative(path).toString();
-            this.functionsBuffer.push("ObjectiveJ.StaticResource._cacheFunction(new CFURL("+JSON.stringify(relative)+", baseURL),\n"+functionString+");");
+            this.functionsBuffer.push("ObjectiveJ.FileExecutable._cacheFunction(new CFURL("+JSON.stringify(relative)+", baseURL),\n"+functionString+");");
         }
 
         var bundle = this.context.global.CFBundle.bundleContainingURL(path);

dist/cappuccino/bin/objj2objcskeleton

@@ -4,14 +4,11 @@
 
 var fs = require("fs"),
     acorn = require("objj-parser"),
-    walk = require("objj-parser/util/walk"),
+    walk = require("acorn-walk"),
     stream = ObjectiveJ.term;
 
-    debugger;
-
 function main(args)
 {
-    debugger;
     args.shift();
 
     if (args.length < 1)
@@ -40,6 +37,8 @@ function raise(pos, message)
     throw syntaxError;
 }
 
+function ignore(_node, _st, _c) {}
+
 var errors = [],
     xcc = walk.make(
     {
@@ -115,7 +114,18 @@ var errors = [],
                 else
                     raise(node.loc.start, "Action methods must have exactly one parameter");
             }
-        }
+        },
+        TypeDefStatement: ignore,
+        ClassStatement: ignore,
+        MessageSendExpression: ignore,
+        GlobalStatement: ignore,
+        ProtocolDeclarationStatement: ignore,
+        ArrayLiteral: ignore,
+        Reference: ignore,
+        DictionaryLiteral: ignore,
+        Dereference: ignore,
+        ImportStatement: ignore,
+        SelectorLiteralExpression: ignore
     }
 );
 
@@ -154,7 +164,7 @@ function parser(args)
             outputHeaderURL = new CFURL([outputDirectory stringByAppendingPathComponent:baseFilenameWithNoExtension + ".h"]),
             outputImplementationURL = new CFURL([outputDirectory stringByAppendingPathComponent:baseFilenameWithNoExtension + ".m"]),
             source = fs.readFileSync(sourcePath, { encoding: "utf8" }),
-            tokens = acorn.parse(source, { locations:true, sourceFile:sourcePath }),
+            tokens = acorn.parse(source, { locations:true, sourceFile:sourcePath, ecmaVersion: 2022 }),
             classesInformation = [],
             ObjectiveCSource = "",
             ObjectiveCHeader = "",

package-lock.json

@@ -260,9 +260,9 @@
       }
     },
     "node_modules/xmlhttprequest-ssl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.1.tgz",
+      "integrity": "sha512-ptjR8YSJIXoA3Mbv5po7RtSYHO6mZr8s7i5VGmEk7QY2pQWyT1o0N+W1gKbOyJPUCGXGnuw0wqe8f0L6Y0ny7g==",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -482,9 +482,9 @@
           }
         },
         "xmlhttprequest-ssl": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-          "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.1.tgz",
+          "integrity": "sha512-ptjR8YSJIXoA3Mbv5po7RtSYHO6mZr8s7i5VGmEk7QY2pQWyT1o0N+W1gKbOyJPUCGXGnuw0wqe8f0L6Y0ny7g=="
         }
       }
     },
@@ -604,9 +604,9 @@
       }
     },
     "xmlhttprequest-ssl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.1.tgz",
+      "integrity": "sha512-ptjR8YSJIXoA3Mbv5po7RtSYHO6mZr8s7i5VGmEk7QY2pQWyT1o0N+W1gKbOyJPUCGXGnuw0wqe8f0L6Y0ny7g=="
     }
   }
 }